[Vuejs]-VueJS/Vuetify – button doesn't toggle on when v-if condition is met

by

1👍

✅

The issue here is reactivity. You can’t just add arbitrary properties to objects without using Vue.set or they won’t be reactive:

Your loop needs to use Vue.set():

for(let i = 0; i < this.cards.length; i++) {
  Vue.set(this.edit, this.cards[i]._id, false)
}

And your click methods needs to use Vue.set()

methods: {
  editCard(card) {
    Vue.set(this.edit, card._id, true)
  },
  saveEdit(card) {
    Vue.set(this.edit, card._id, false)
  }
}

You may also use this.$set within components as well.

👤Ohgodwhy

0👍

You need to use Vue.$set to check changes inside your object:

 mounted() {
    if(this.cards.length > 0) {
      this.edit = {};
      
      for(let i = 0; i < this.cards.length; i++) {
        this.$set(this.edit, this.cards[i]._id, false )
      }
    }
  },
  methods: {
    editCard(card) {
      //this.edit[card._id] = true;
      this.$set(this.edit, card._id , true )
      console.log(this.edit[card._id]);
      console.log(this.edit);
    },
    saveEdit(card) {
      //this.edit[card._id] = false;
      this.$set(this.edit, card._id , false )
      console.log(this.edit[card._id]);
      console.log(this.edit);
    }
  }
👤Hans Felix Ramos

Leave a comment