使用vuejs和axios从JSON API显示数据

Question

以下是我正在构建的Vue.js应用程序的JS和HTML代码。

数据返回正常，但我无法在前面显示它。

任何帮助，将不胜感激。

 data() { return { overview: this.getOverview() } }, methods: { getOverview() { return axios.get('http://localhost:8000/v1/overview') .then(response => { this.results = response.data console.log('results data', this.results) }) .catch(function(error) { console.log(error); }) } } 

 <tr v-for="overview in overview"> <td> {{overview.id}} </td> <td></td> <td class="text-right"> {{overview.schools}} </td> <td class="text-right"> {{overview.primary}} </td> <td class="text-right"> {{overview.secondary}} </td> </tr> 

JSON数据

 {"schools":545,"counsellors":4,"reports":13,"sub_regions":[{"id":1,"name":"Barima-Waini","schools":45,"primary":42,"secondary":3},{"id":2,"name":"Pomeroon-Supenaam","schools":45,"primary":37,"secondary":8},{"id":3,"name":"Essequibo Islands-West Demerara","schools":72,"primary":59,"secondary":13},{"id":4,"name":"Georgetown","schools":69,"primary":54,"secondary":15},{"id":5,"name":"Outside Georgetown","schools":62,"primary":31,"secondary":31},{"id":6,"name":"Mahaica-Berbice","schools":39,"primary":32,"secondary":7},{"id":7,"name":"East Berbice-Corentyne","schools":71,"primary":54,"secondary":17},{"id":8,"name":"Cuyuni-Mazaruni","schools":31,"primary":28,"secondary":3},{"id":9,"name":"Potaro-Siparuni","schools":22,"primary":20,"secondary":2},{"id":10,"name":"Upper Takutu-Upper Essequibo","schools":49,"primary":45,"secondary":4},{"id":11,"name":"Upper Demerara-Upper Berbice","schools":40,"primary":32,"secondary":8}]} 

Answer 1

免责声明：我从未真正使用过Vue

问题是您正在将视图中的数据绑定到名为overview的视图模型属性。 overview的值是一个Promise ，如果它解决，将不可避免地使用undefined来解决，因为您的promise链中的final .then不会返回值：

return axios.get('http://localhost:8000/v1/overview')
  .then(response => {
     this.results = response.data;
     console.log('results data', this.results);
   })
   .catch(function(error) {
     console.log(error);
   });

如您所见，我们正在将API调用的响应分配给result属性，但这不是我们要绑定的属性。 我相信，正如Bert建议的那样，如果可能的话，您需要分配给this.overview而不是this.result ，我更愿意简单地返回承诺链中的已解决值。

说到承诺链，由于您正在使用Vue，因此您在进行代码转换，因为您在进行代码转换，因此应该利用async / await来提高可读性。

考虑编写如下代码

async getOverview() {
  try {
    const {data:{json:{sub_regions}}} = await axios.get('http://localhost:8000/v1/overview');
    console.log('results data', sub_regions);
    this.overview = sub_regions;
  }
  catch (error) {
    console.log(error);
    return [];
  }
}

感谢Bert的链接和有用的分析，我更新了答案以反映常见的Vue模式

你最终会得到这样的东西

new Vue({
  el: "#app",
  data() {
    return {
      overview: []
    }

  },
  methods: {
    async getOverview() {
      try {
        const {data:{json:{sub_regions}}} = await axios.get('http://localhost:8000/v1/overview');
        console.log('results data', sub_regions);
        this.overview = sub_regions;
      }
      catch (error) {
        console.log(error);
        return [];
      }
    }
  },
  created(){
    this.getOverview()
  }
})