Creé un programa vue.js simple que usa un bucle for para alternar la visibilidad del texto. Tengo un botón que debería alternarlo, pero cuando se hace clic en él, cambia la variable pero no actualiza el botón.
let app = new Vue({ data() { return { array: [true,true,false], text: ["0","1","2"] } }, methods:{ change(index){ this.array[index]=!this.array[index] console.log(this.array[index],index) } }, el: "#app" }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(item,index) in text"> <button @click="change(index)">toggle show</button> <a v-if="!array[index]">...</a> <a v-else>{{item}}</a> </div> </div>Se encuentra con una advertencia de reactividad : no puede actualizar una entrada específica en una matriz por índice de esa manera.
Deberá usar Vue.set o this.$set (este último es simplemente un alias para el primero):
change(index){ this.$set(this.array, index, !this.array[index]); }