条件式、イベント処理、バインディングがAJAX呼び出し後に機能しない

Question

'beforeCreate'ライフサイクル中にAJAX呼び出しを行い、受信データでデータ変数を更新しています。私はこのようにvを使ってデータを補間することができます。ただし、条件文、イベント処理、バインドはこのコンテキスト内では機能しません。私はこのような何かをしたいHTMLで

var app = new Vue({ 
    el: '#app', 
    data: { 
    items: [], 
    isVisible: [] 
    }, 
    beforeCreate: function() { 
    var vm = this; 
    // make ajax call 
    // on done 
    .done(function(res) { 
     // do some validation 
     vm.items = res.itemList; 
     for (var i = 0; i < vm.items.length; i++) { 
     vm.isVisible.push(false) // initialize to false 
     } 

    }) 
    } 
)} 

：

<div v-for="(item, index) in items"> 
    <img :src="item.imgURL1" v-if="isVisible[index]"> 
    <img :src="item.imgURL2" v-else> 
    <button @click="isVisible[index] = !isVisible[index]>Toggle</button> 
</div> 

私はこのような何かを実装する方法上の任意の提案は？

Answer 1

V-用を使用するときにインデックスを取得するには、v-forは、現在の項目のインデックスのオプションの第二引数をサポートしています。sysntzはdocumentationパーとしてこの

v-for="(item, index) in items" 

のようなものです、以下のように変更します：

を

<div v-for="(item, index) in items"> 
    <img :src="item.imgURL1" v-if="isVisible[index]"> 
    <img :src="item.imgURL2" v-else> 
    <button @click="isVisible[index] = !isVisible[index]>Toggle</button> 
</div> 

Answer 2

この警告はすでにVueJSのドキュメントで議論されていることが分かります。最初に詳細を調べることなく質問を投稿して申し訳ありません。同じ問題を抱えているこの記事に出くわした人は、https://vuejs.org/v2/guide/list.html#Caveats

このコード例のforループセクションでVue.set()メソッドを使用するだけでした。

for (var i = 0; i < vm.items.length; i++) { 
    Vue.set(vm.isVisible, i, false) // intialize to false    
}