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)

在我的用户列表组件中，我正在尝试关注脚本

 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
});

...这意味着外部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
});

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

1 个答案: