如何使用vue js 2从json文件中获取数据？

Question

我正在尝试从json文件中获取数据，它只有json数据。

[{"id":81,"body":"There are some reason to fix the issues","created_at":"2017-11-16 11:56:47","updated_at":"2017-11-16 11:56:47"}]

我添加了vue-resource，并按照vue语法正确使用它。

import vueResource from 'vue-resource'
Vue.use(vueResource)

在我的userlist组件中，我尝试执行以下脚本

 export default {

    data:function(){
      return {
        list:[],
        car:{
          id:'',
          body:''
        }
      };
    },

    created: function(){
      this.fetchCarList();
    },


    methods:{
      fetchCarList: function(){
        this.$http.get('http://localhost:8080/api.js').then(function(response){
          this.list = response.data
        });
      }

    }
}

这是组件HTML循环

<ul id="example-1">
    <li v-for="item in list">
        {{ item.body }}
    </li>
</ul>

我已经检查了http://localhost:8080/api.js，它正确地返回了数据。另外，当我在fetchCarList方法中添加json数据时，循环可以很好地工作，但是使用get()调用它就不能工作了。

我该如何解决这个问题？

Answer 1

您有一个作用域问题:回调中的this不引用您的Vue实例。这是因为您没有使用ES6箭头函数，即：

this.$http.get('http://localhost:8080/api.js').then(response => {
    this.list = response.data
});

...which表示不传入外部this。您必须自己代理它，即在外部使用var self = this，然后使用self.list = response.data

var self = this;
this.$http.get('http://localhost:8080/api.js').then(response => {
    self.list = response.data
});