使用方法更改数据后Vue v-show更新

Question

我正在遍历这个对象数组，并且在每个对象中都有一个属性 -keyword.edited用值初始化 - false all 循环如下所示：

<tr v-for="(keyword, index) in keywords">
    <td>{{keyword.tag_name}}</td>
    <td @click="edit_keyword(index)">
        <el-input-number v-show="keyword.edited" :step="step" size="small" v-model="keyword.max_bid"></el-input-number>
    </td>
</tr>

现在因为初始化false没有任何关键字将显示。问题是当我单击edit_keyword(index)相关关键字的值更改为 true 时：

edit_keyword(index){
    this.keywords[index].edited = !this.keywords[index].edited
    return  this.keywords[index].edited
}

但 DOM 不会更新，或者换句话说，相关的关键字不会像我预期的那样显示。知道我怎样才能做到这一点吗？也试图用计算属性实现相同的想法，但仍然没有奏效......

Answer 1

您正在更改的属性不是反应性的，因此 vue 不会观察它的变化。如果你更新对象的属性，你需要用 $set 方法告诉 Vue：

edit_keyword(index) {
    this.$set(this.keyswords[index], 'edited', !this.keywords[index].edited)
}