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

【问题标题】：How can I get data from json file using vue js 2?如何使用 vue js 2 从 json 文件中获取数据？
【发布时间】：2017-11-16 13:42:30
【问题描述】：

我正在尝试从 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() 调用它不起作用。

我该如何解决这个问题？

【问题讨论】：

您是否尝试在回调中将response.data 记录到控制台而不是分配？你看到回应了吗？
@Terry 是的，我刚刚做了。正确显示 json 数据的控制台日志
那我知道你的问题是什么：检查我的答案:)
为什么要做http请求？是json文件不在同一台服务器上！只需将 json 文件导入您的 js 文件即可。 const json = require('./data.json');

标签： javascript vue.js vuejs2

【解决方案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
});

【讨论】：

我已经尝试过您的指示，但仍然无法正常工作