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

    }
}

使用Vue.js应用条件CSS类时出现问题

1 个答案: