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

Question

I've been struggling with something that seems so simple, but yet so hard to understand why it's not working. I have an array of objects. I render the objects using v-for and within each render is are two buttons; one toggles the other and vice versa. My issue is I can't seem to make the 'mdi-pencil' button toggle the 'mdi-floppy' button. I've checked the console and the data changes but the buttons don't seem to be reacting to the data change.

Here's a CodePen recreation of my code.

This is the template:

<template>
    <v-row>
        <v-col v-for="(card, index) in cards" :item="card" :key="index">
            <v-btn 
                v-if="edit[card._id] == false" 
                @click="editCard(card)" 
                icon color="success"
            >
                <v-icon>mdi-pencil</v-icon>
            </v-btn>

            <v-btn 
                v-else" 
                @click="saveEdit(card)" 
                icon 
                color="success"
            >
                <v-icon>mdi-floppy</v-icon>
            </v-btn>
        </v-col>
      </v-row>
</template>

This is the script:

<script>
export default {
    name: 'AccountSettings',
    data() {
        return {
            cards: [
                {
                    _id: 1,
                    name: 'Number 2'
                },
                {
                    _id: 2,
                    name: 'Number 2'
                },
                {
                    _id: 3,
                    name: 'Number 3'
                }
            ],
            edit: {}
        }
    },
    mounted() {
        if(this.cards.length > 0) {
            this.edit = {};

            //creates properties for 'edit' object based on the cards array length

            for(let i = 0; i < this.cards.length; i++) {
                this.edit[this.cards[i]._id] = false;
            }
        }
    },
    methods: {
        //this method will toggle on the 'mdi-floppy' button

        editCard(card) {
            this.edit[card._id] = true;
            console.log(this.edit[card._id]);
            console.log(this.edit);
        },

        //this method will toggle on the 'mdi-pencil' button

        saveEdit(card) {
            this.edit[card._id] = false;
            console.log(this.edit[card._id]);
            console.log(this.edit);
        }
    }
}
</script>

The reason why I chose to do this:

mounted() {
    if(this.cards.length > 0) {
        this.edit = {};

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

is because each object, when rendered in v-for, needs to have their own unique variable for the v-if condition. If all of the rendered objects all used the same variable for their v-if condition, then all of the buttons would toggle at the same time, which isn't what I want.

Doing this (below) will just toggle all the buttons and that's not what I want. I want the buttons to toggle independently:

//script

data() {
    return {
        ...
        edit: false
    }
}

//template

<v-col v-for="(card, index) in cards" :item="card" :key="index">
    <v-btn 
        v-if="edit == false" 
        @click="edit = true" 
        icon color="success"
    >
        <v-icon>mdi-pencil</v-icon>
    </v-btn>

    <v-btn 
        v-else 
        @click="edit = false" 
        icon 
        color="success"
    >
        <v-icon>mdi-floppy</v-icon>
    </v-btn>
</v-col>

Ohgodwhy · Accepted Answer · 2020-04-22 06:58:17Z

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.

answered Apr 22, 2020 at 6:58

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

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

1 Comment

chataolauj Over a year ago

Ahhhhhh. I knew it was something simple, but yet I couldn't figure it out. Thanks; much appreciated!

tony19 · Accepted Answer · 2022-07-16 04:53:33Z

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);
    }
  }

edited Jul 16, 2022 at 4:53

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 22, 2020 at 6:59

Hans Felix Ramos

4,4543 gold badges19 silver badges45 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related