다음 VUE 구성 요소</p> <pre><code><employee-times :employees="{{$employees}}" :supplies="{{$supplies}}" :commits="{{$commits}}" :times="{{$times}}"></employee-times> </code></pre> <p>를 갖는 VUE 구성 요소에

Question

을 아약스 데이터를 누르면 나는 변화에 대한 아약스 데이터를 필터링하려고하지만 데이터가 업데이트되지 않습니다보다

<template> 

<div> 

<select class="form-control input" v-model="currentYear" @change="filter()"> 
         <option v-for="option in yearsOptions" v-bind:value="option"> 
          {{ option }} 
         </option> 
        </select> 
<tr v-for="employee,key in _employees" v-if="commits[key]"> 

            <td>{{ key }}</td> 
            <td>{{ employee[0].first_name }}</td> 
            <td>{{ employee[0].last_name }}</td> 
            <td>{{ employee[0].nick }}</td> 
            <td>{{ employee[0].role }}</td> 
            <td>{{ employee[0].skill }}</td> 
            <td v-for="n in 12"> 
             <div v-if="_commits[key][n]">{{ _commits[key][n].hours }}</div> 
             <div v-else> </div> 
            </td> 
           </tr> 

</div> 

</template> 

여기는 내가 시도하고있는 스크립트이지만 메소드 함수에서 템플릿에 새 데이터를 푸시 할 수 없습니다.

<script> 

    export default { 
     name: 'employee-times', 
     props: ['supplies', 'times', 'commits', 'employees'], 
     components: { 
     }, 

     created() { 

      axios.get('/api/v1/roles', { 
       headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, 
      }).then(response => { 
       th 

    is.roles = response.data 
       }).catch(error => { 

       }) 

       this._times = this.times; 
       this._commits = this.commits; 
       this._supplies = this.supplies; 
       this._employees = this.employees; 


      }, 
      data() { 
       return { 
        count: 0, 
        yearsOptions: [], 
        _employees: {}, 
        _supplies: {}, 
        _times: {}, 
        _commits: [], 
        currentYear: null, 
        currentStatus: 1, 
        currentPosition: 0, 
        statusOptions: [ 
         {'id': '1', 
          'text': 'Active' 
         }, {'id': '0', 
          'text': 'Inactive' 
         }], 
        currentSkillset: 'all', 
        skillsetOptions: [ 
         {'id': 'all', 
          'text': 'All' 
         }, {'l1': 'l1', 
          'text': 'L1' 
         }, {'l1': 'l2', 
          'text': 'L2' 
         }, {'l1': 'l3', 
          'text': 'L3' 
         }, {'l1': 'l4', 
          'text': 'L4' 
         }, {'l1': 'l5', 
          'text': 'L5' 
         }], 
        status: {}, 
        roles: {}, 
        skillsets: {} 
       }; 
      }, 
      mounted() { 

       this.currentYear = moment().format('Y') 
       var from = moment().subtract('4', 'years').format('Y') 
       var to = moment().add('2', 'years').format('Y') 

       while (from <= to) { 
        this.yearsOptions.push(from); 
        from++; 
       } 

      }, 
      watch: { 
       '_employees': function (val, oldVal) { 
        console.log('new: %s, old: %s', val, oldVal) 
       } 
      }, 
      methods: { 
       commit() { 

       }, 
       clear() { 

       }, 
       months() { 
        return moment.monthsShort() 
       }, 

       filter() { 
        var data = { 
         year: this.currentYear, 
         status: this.currentStatus, 
         position: this.currentPosition, 
         //skill: currentSkillset    
        } 

        axios.post('/api/v1/supply/track-times', data, { 
         headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, 
        }).then(response => { 
         this._employees = {} 

         this.$set(this, '_employees', JSON.parse(response.data.employees)) 
         this.$set(this,'_times', JSON.parse(response.data.times)) 
         this.$set(this,'_supplies', JSON.parse(response.data.supplies)) 
         this.$set(this, '_commits', JSON.parse(response.data.commits)) 

        }).catch(error => { 

        }) 
       } 
      }, 
     }; 
    </script> 

나는이 경우에 무엇을 놓쳤는가?

Answer 1

데이터 속성에서 "_"접두어를 제거하면 제대로 작동합니다. 내부 자료에는 밑줄이 사용되므로 최대한 사용하지 않는 것이 좋습니다 (https://vuejs.org/v2/api/#data 참조)

Answer 2

템플릿 래퍼가 필요한 v-for 및 테이블 (ref 'v-for with 2 every time')에 문제가 있습니다.

예 : CodePen을 참조하십시오.

<div id='app'> 
    <table> 
    <template v-for="(employee, key) in employees"> 
     <tr> 
     <td>{{ employee.first_name }}</td> 
     <td>{{ employee.last_name }}</td> 
     </tr> 
    </template> 
    <table> 
</div> 

또한합니다 (codepen에들 n _EMPLOYEE하는 직원을 변경해보십시오) 밑줄을 제거해야 할 것으로 보인다.