javascript - 使用 Vue.js 应用条件 CSS 类的问题

Question

我有一个显示帐户余额的跨度。您可以单击它来编辑该余额。您可以在下面看到我在hidden更改编辑变量时将类应用于元素。

<span @click="updateEditAccount(true, false)" v-bind:class="{ hidden: account.editing == true }">Balance ${{ account.balance }}</span>
<input v-bind:class="{ hidden: account.editing == false }" type="number" step="0.01" v-model="account.balance" >

这是改变该值的方法

updateEditAccount(editValue, updateLedger) {
    this.account.editing = editValue
    alert(this.account.editing)
    if(updateLedger) {

    }
},

当我将初始值设置为 true 或 false 时，它​​会显示正确的值。调用该方法时，我可以看到该值已正确更改。

隐藏类只是一个display:none;

所以值确实改变了，但可见元素没有改变。

标签： javascriptvue.js

Answer 1

这是常见的反应性问题。您可以使用Vue.set

updateEditAccount(editValue, updateLedger) {
    this.$set(this.account, 'editing', editValue)
    if(updateLedger) {

    }
}

更新：

或者你可以使用深拷贝：

updateEditAccount(editValue, updateLedger) {
    this.account.editing = editValue
    this.account = JSON.parse(JSON.stringify(this.account))
    if(updateLedger) {

    }
}

ES6

updateEditAccount(editValue, updateLedger) {
    this.account = {...this.account, editing: editValue}
    if(updateLedger) {

    }
}