[Vuejs]-Conditionals, event handling, binding not working after AJAX call

by

0👍

To get index when using v-for, v-for supports an optional second argument for the index of the current item: the sysntz is like this

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

As par the documentation, make changes like following:

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

0👍

Figured it out. Turns out this caveat was already discussed in VueJS docs. Sorry for posting the questions without first going through the docs in detail. For anyone who comes across this post having the same problem, the answer can be found at: https://v2.vuejs.org/v2/guide/list.html#Caveats

Just had to use the Vue.set() method in the for loop section of above code example.

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

Leave a comment