如何在vue-resource中设置数据对象，使其在控制台中不会出错

Question

我在这个周末学习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); }); 
     } 
    } 
} 

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进行未来验证。