Vueインスタンスのデータが更新されない理由

Question

Vue 2.2.6バージョンが使用されています。
私は非常に単純なVueインスタンスを構築しており、従業員名のリストを返すようにしたいと思います。しかし、問題は、取得後には/employees.jsonemployeesデータが更新されていないことです。私はconsole.logでデバッグしようとしましたが、loadData()関数の従業員データが正しく設定されていることを示しています。しかし、この機能が実行された後、従業員の値は再び空になります。

var employees = new Vue({ 
    el: 'employees', 
    template: "<ul id='employees'><li v-for='employee in employees'>{{ employee['name'] }}</li></ul>", 
    data: { 
    employees: [] 
    }, 
    methods: { 
    loadData: function() { 
     this.$http.get('/employees.json').then(response => { 
     this.employees = response.body; 
     //1. console.log returns here ">employees: [object Object]" 
     }); 
    } 
    }, 
    mounted: function(){ 
    this.loadData(); 
    //2. console.log returns here empty employees value 
    } 
}) 

どこが間違っていますか？変数を/employees.jsonからemployeesに正しく割り当てるにはどうすればいいですか？

Answer 1

console.logのmountedは、loadDataが非同期で完了していないため空になります。

あなたelはそれが＃を必要とするため仕事に行くされていません。'#employees' templateは、テンプレートがコンポーネントのためのものであるので、そのようにインラインで仕事に行くのではありません。どこに置く？あなたの答えのための

var employees = new Vue({ 
 
    el: '#employees', 
 
    data: { 
 
    employees: [] 
 
    }, 
 
    methods: { 
 
    loadData: function() { 
 
     setTimeout(() => { 
 
     console.log('setting'); 
 
     this.employees = [{name:'one'},{name:'two'}]; 
 
     }, 800); 
 
     /*this.$http.get('/employees.json').then(response => { 
 
     this.employees = response.body; 
 
     //1. console.log returns here ">employees: [object Object]" 
 
     });*/ 
 
    } 
 
    }, 
 
    mounted: function(){ 
 
    this.loadData(); 
 
    } 
 
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 
<ul id='employees'><li v-for='employee in employees'>{{ employee['name'] }}</li></ul>