index in v-for for array v-if not updating - Vue.js

Question

I've created a simple vue.js program that uses a for loop to toggle the visibility of text. I have a button that should toggle it, but when it is clicked, it changes the variable but doesn't update the button.

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>

Is there any way I could get this simple app to work without changing the arrays?

Terry · Accepted Answer · 2022-02-17 06:16:13Z

4

You’re running into a reactivity caveat: you cannot update a specific entry in an array by index in that way.

You’ll need to use Vue.set or this.$set (the latter is simply an alias for the former):

change(index){
  this.$set(this.array, index, !this.array[index]);
}

answered Feb 17, 2022 at 6:16

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

index in v-for for array v-if not updating - Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related