Problem applying conditional CSS class using Vue.js

Question

I have a span showing an account balance. You can click on it to edit that balance. You can see below I'm applying the class hidden to the elements when the editing variable is changed.

<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" >

This is the method that changes that value

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

    }
},

When I set the initial value to true or false it displays the correct one. When the method is called I can see that the value is changed correctly.

The hidden class is simplye a display:none;

So the value does change, but the visible element doesn't change.

tony19 · Accepted Answer · 2022-07-15 22:43:16Z

1

This is common reactive problem. You can use Vue.set

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

    }
}

Updated:

Or you can use deep copy:

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

    }
}

edited Jul 15, 2022 at 22:43

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 5, 2018 at 8:10

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jhorra Over a year ago

I made this changed, but have the same issue. Both ways change the value. If I check the value after it's updating, the model has the correct value, but the displayed element doesn't change.

ittus Over a year ago

I updated my answer. Can you try deep copy solution?

ittus Over a year ago

There is a case this.account.editing is updated but Vue component is not rendered again.

ittus Over a year ago

As my understanding, when you update this.account.editing, this.account is still point to old object and Vue doesn't recognize data change. It doesn't re-render HTML element. It only re-render if this.account object change.

ittus Over a year ago

You might want to try this.$forceUpdate(), but I'm not sure this work. I usually use deep copy with ES6 syntax.

|

Collectives™ on Stack Overflow

Problem applying conditional CSS class using Vue.js

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related