如何在 vue-resource 中设置数据对象，这样它就不会在控制台中出错

Question

我这个周末正在学习 Vue，所以一个非常简单的问题。

我正在尝试将一些 jQuery 转换为使用 Vue 和 vue-resource。我正在取回带有物品的位置的数据。我遇到的问题是，每当我加载这个对象时，我都会收到一条错误消息，指出该位置为空（这是我将其设置在 data 中的位置）。执行此操作的正确方法是什么？我应该有一个保护语句来防止它通过项目呈现？如果它是一个位置数组，我可以设置为一个空数组但是对于单个对象，它似乎应该为空。如何最好地填充一个空数据对象通过异步调用？

const Location = {
    data(){
       return {location: null }
    },
     template: `<div>{{location.name}}
                   <div v-for="item in location.items">
                     <div>{{item.id}}</div>
                   </div>
                </div>`,
        created(){
          this.fetchData();
       },
       methods: {  fetchData(){
         this.$http.get('/arc/api/v1/site_admin/locations/' + this.$route.params.id + '/dashboard').then((response) => {
           console.log(response.data);
           this.location = response.data.location
        }).catch( error => { console.log(error); });
       }
     }
}

Answer 1

您收到的错误是由于您的模板尝试将 location 设置为 null 进行呈现，如您所述。在这些情况下，您应该使用 v-if 来告诉模板中处理填充的 location 的部分，除非设置了一个，否则它不应呈现：

<div v-if="location">
  {{ location.name }}

  <div v-for="item in location.items">
    <div>{{ item.id }}</div>
  </div>
</div>

PS: vue-resource 已经 officially marked as no longer undergoing active development。尽管使用它没有问题，但您应该考虑使用替代 AJAX 库，例如 axios，以确保您的 Vue 之旅不会过时。

如何在 vue-resource 中设置数据对象，这样它就不会在控制台中出错

how to set the data object in a vue-resource such that it won't error in console

vue.js

vue-resource

vuejs2