使用 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

這是常見的反應性問題。 你可以使用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) {

    }
}