AJAX調用後條件，事件處理，綁定不起作用

我在'beforeCreate'生命週期中進行AJAX調用，並用接收到的數據更新數據變量。我可以用這種方式插入數據。但是，條件，事件處理，綁定在此上下文中不起作用。AJAX調用後條件，事件處理，綁定不起作用

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 
     } 

    }) 
    } 
)}

在我想要做這樣的事情在html：

<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>

我如何能實現這樣的事情有什麼建議？

來源

2016-12-06 Grant

要使用V-何時拿到指標，v-for支持當前項目的索引的第二個可選參數：該sysntz是這樣

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

與參數的documentation，做出更改，如下列：

<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>

來源

2016-12-06 03:09:03 Saurabh

其實我有你的建議v-setup。當我提出代碼示例時，忘了寫它。這並不能解決問題。 – Grant

@Grant仍然在使用'isVisible [i]'not'isVisible [index]'？你遇到的任何錯誤？是「物品」填充正確，你可以像HTML這樣'{{items}}'得到它？ – Saurabh

是的，我能夠填充項目數組中的值沒有問題。 – Grant

想通了。原來這個警告已經在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    
}

來源

2016-12-06 06:41:30 Grant

請添加代碼示例以幫助您解決問題以及鏈接，以便可以幫助其他人，鏈接應該用作參考。 – Saurabh

我修復了我應該使用Vue.set（）方法的答案。 – Grant

AJAX調用後條件，事件處理，綁定不起作用

回答

相關問題