javascript - 为什么Vue实例的数据没有更新

Question

使用的是Vue 2.2.6版本。
我构建了非常简单的 Vue 实例，我希望它返回员工姓名列表。但问题是，在获取 /employees.json employees 数据后，数据没有更新。我尝试使用 console.log 对其进行调试，它显示 loadData() 函数内部的员工数据已正确设置。但是执行完这个函数后，employees 的值又变空了。

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

mounted 中的 console.log 将返回空，因为 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>