Vue.js 如何在vue资源中设置数据对象，使其赢得'；控制台中的t错误

这个周末我要学习Vue，所以这是一个非常简单的问题

我正在尝试将一些jQuery转换为使用Vue和Vue资源。我正在获取包含项目的位置的数据。我遇到的问题是，每当我加载这个对象时，我都会收到一个错误，说该位置为空（这就是我在

data

中设置的。正确的方法是什么？我应该有一个保护语句来防止它通过项呈现吗？如果它是一个位置数组，我可以设置为空数组，但对于单个对象，它似乎应该为null。如何最好地拥有一个通过异步调用填充的空数据对象

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

const位置={
数据（）{
返回{location:null}
},
模板：`{location.name}}
{{item.id}
`,
创建（）{
这是fetchData（）；
},
方法：{fetchData（）{
this.$http.get（'/arc/api/v1/site_admin/locations/'+this.$route.params.id+'/dashboard'）。然后（（响应）=>{
console.log（response.data）；
this.location=response.data.location
}).catch（错误=>{console.log（错误）；}）；
}
}
}

您收到的错误是由于您的模板试图在将

位置设置为
null
的情况下进行渲染造成的。在这些情况下，您应该使用
v-if
告诉模板中处理填充的
位置的部分，除非设置了一个位置，否则不应进行渲染：

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

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


{{location.name}
{{item.id}

P:VUE资源< /代码>已经被使用。虽然没有使用它的问题，但是你应该考虑使用一个替代的Ajax类库，比如AXIOS，来证明VUE的旅程。
 < P>你所接收到的错误是由于你的模板试图用<代码>位置> <代码>设置为<代码> null < /C> >你已经注意到了。在这些情况下，您应该使用
v-if
告诉模板中处理已填充
位置的部分，除非设置了一个位置，否则该部分不应呈现：

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

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


{{location.name}
{{item.id}

P>VUE资源< /代码>。虽然没有使用它的问题，但是你应该考虑使用一个替代Ajax库，比如AXIOS，用VUE来证明你的旅程。
 THX的建议，看到VoE资源更多的WHO-TO，但是会切换到AXIOS。非常感谢Healthx的建议，看到更多的使用vue资源，但将切换到axios。非常感谢您的帮助