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不会更改watching。如果更新对象的属性，则需要使用$ set方法告诉Vue：

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

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

1 个答案: