How to render v-if condition using the index of a loop in Vue JS.

v-if=array[index] not working

If you are new to Vue you may not be familiar with this limitation of this framework. Actually its not a limitation of Vue js. It happens because Vue cannot detect the changes of an array element directly, this is one of the limitation of JavaScript.  But thankfully, Vue has a solution for this, as always .

 This is the problem I faced while working on my project, I spent quite a few hours wondering what went wrong because everything I did was correct. After spending few hours debugging and googlilng I found out that Vue cannot detect the change in array directly. But as already mentioned vue has a way to solve this. Vue provides a helper function Vue.set() which changes the array element and makes it reactive.

this.show[index] = !this.show[index]

//simply doing this does not work. So we have to Use Vue.set helper function

this.show[index] = !this.show[index]

//simply doing this does not work. So we have to Use Vue.set helper function

 Vue.set(this.show, index, !this.show[index])

//That is the Vue method but if we are using ES6 we can also use native JS spread operator to solve this problem.


this.show[index] = !this.show[index]
this.show = [...this.show]

That's it !