推動AJAX數據VUE組件

Question

具有以下VUE組件

<employee-times :employees="{{$employees}}" :supplies="{{$supplies}}" :commits="{{$commits}}" :times="{{$times}}"></employee-times> 

，我渲染通過道具

<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> 

比我試圖篩選上改變了ajax數據，但數據不會更新

這裏是我正在嘗試的腳本，但從方法功能我無法將新數據推送到模板

<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

從您的數據屬性中刪除「_」前綴，然後它應該工作。 Vue對內部使用下劃線，所以最好避免使用它（請參見https://vuejs.org/v2/api/#data）

Answer 2

v-for和表（參考號'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 _employee）。