javascript - 如何使用vuejs组件获取json数据？

Question

我想使用 vue 组件从外部文件访问 json 数据，但我无法在网页中获得任何输出。以下是我尝试过的代码。有人可以帮助我吗？

下面是Json数据，其中包含我想要在网页上显示的模型

{
    "models": [
      {
        "title": "IRIS",
        "project": "ABC",
        "category": "SINGLES",
        "bedrooms": 3

      },
      {
        "title": "LILAC",
        "project": "ABC",
        "category": "DOUBLE",
        "bedrooms": 4

      },
      {
        "title": "ASTER",
        "project": "ABC",
        "category": "SINGLES",
        "bedrooms": 4

      }
    ]
  }

Vue.component('single-model', {

  data: function() {
    return {
      myData: []

    }
  },
  template: `<div v-for="model in myData">
              <p>{{model.title}}</p>
              <hr>
            </div>`,

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

  methods: {
    fetchData: function() {
      var url = 'j.json';
      axios.get(url)
        .then(function(res) {
          this.myData = res.data.models;

        });
    }
  }
});
var vm = new Vue({
  el: '#app',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>

    <div id="app">
      <single-model></single-model>

    </div>

Answer 1

1. 您可能已经注意到白色运行提供的代码片段，template 只能有一个子元素，在最外层元素上使用 v-for 将创建多个 child 。

2. this 在您的情况下并不是指 fetchData 函数中的 vue 组件。

methods:{
	fetchData() {
      var url = '';
      axios.get(url)
        .then((res) => {
          this.myData = res.data;
		});
    }
  },

尝试在代码中替换为上述代码段。