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;

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

Answer 1

这很常见reactive problem 。您可以使用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) {

    }
}