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调用后条件，事件处理，绑定不起作用

回答

相关问题