Vue.js VueJS/Vuetify-按钮不'；当满足v-if条件时，t开关打开

我一直在努力解决一些看似简单但却很难理解为什么不起作用的问题。我有一个对象数组。我使用v-for渲染对象，每个渲染中有两个按钮；一个切换另一个，反之亦然。我的问题是我似乎无法使“mdi铅笔”按钮切换到“mdi软盘”按钮。我已经检查了控制台和数据更改，但是按钮似乎没有对数据更改做出反应

这是我的代码的一个新版本

这是模板：

<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>

mdi铅笔
这里的问题是反应性。如果不使用
Vue.set
，您不能仅向对象添加任意属性，否则这些属性将不起作用：

您的循环需要使用
Vue.set（）
：

for（设i=0；i

而您的
单击
方法需要使用
Vue.set（）

方法：{
编辑卡（卡片）{
Vue.set（this.edit，card.\u id，true）
},
保存编辑（卡片）{
Vue.set（this.edit，card.\u id，false）
}
}

您也可以在组件中使用
this.$set
。
您需要使用来检查对象内部的更改：

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

mounted（）{
如果（this.cards.length>0）{
this.edit={}；
for（设i=0；i
ahhhh。我知道这很简单，但我想不出来。谢谢非常感谢！
mounted() {
    if(this.cards.length > 0) {
        this.edit = {};

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

//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>

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