コンソールでエラーが発生しないように、vueリソースにデータオブジェクトを設定する方法

Question

私はこの週末Vueを学んでいますので、非常に簡単な質問です。

私はいくつかのjQueryをvue-resourceでVueを使用するように変換しようとしています。アイテムのある場所のデータを取得しています。私が抱えている問題は、このオブジェクトをロードするたびに、場所がnullであることを示すエラーが出るということです（これは、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

あなたが受信しているエラーは、あなたが指摘してきたようにnullにlocation設定してレンダリングしようとするあなたのテンプレートによるものです。これらの事例では、あなたがその取引テンプレートの一部を伝えるためにv-ifを使用する必要があります人口はです

<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されているものが設定されていない限り、それはレンダリングべきではないと3210。それを使用することに問題はありませんが、Vueであなたの旅を将来的に証明するために、代わりにAxiosのような別のAJAXライブラリを使用することを検討する必要があります。