vuejs/js object changes but doesn't reflect it in the DOM

Question

I am trying to loop through and array of objects printing list items. I have a click listener which add a custom property the object and a class binding is dependent on that property value. Here is my code please have a look.

Html

<div class="row wi ony-bor-ans" v-if="q.ans" v-for="(ans,i) in q.ans" :key="i">
<div class="col-auto que-ans-main-ul">
    <ul>
        <li @click="voteOnAns(1,i)" :class="{voted:ans.ansVotedUp}">
            <i class="fa fa-chevron-up"></i>
        </li>
        <li><span>{{i}}</span></li>
        <li @click="voteOnAns(-1,i)" :class="{voted:ans.ansVotedDown}">
            <i class="fa fa-chevron-down"></i>
        </li>
    </ul>
</div>

My vue method voteOnAns looks like this

voteOnAns(ansVoteType,i){
if(ansVoteType>0){
    this.q.ans[i].ansVotedUp=true;
    this.q.ans[i].ansVotedDown=false;
}else{
    this.q.ans[i].ansVotedDown=true;
    this.q.ans[i].ansVotedUp=false;
}
console.log(this.q.ans);

}

Here this.q.ans prints the specific object correctly.

Another interesting thing is, I am using vue chrome extension and there I see some time this new property added and sometime is they are not there in object. But console.log shows the object correctly.

Any help or explanation is highly appreciated. Thank you.

tony19 · Accepted Answer · 2022-07-15 23:50:49Z

2

Due to limitations of Javascript, Vue can not detect property additions so those new properties are not reactive.

You have to use Vue.set to add reactive properties dynamically:

Vue.set(this.q.ans[i], 'ansVotedUp', true);

edited Jul 15, 2022 at 23:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 7, 2017 at 13:50

PatrickSteele

14.7k2 gold badges55 silver badges54 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-16 00:23:30Z

1

You cannot change the array value directly when use with Vue. What you need to do is to use Vue.set to update the value. Because Vue cannot detect the value changed when update the value with array. You may check the list rendering caveat on vue official site.

voteOnAns(ansVoteType,i){
    if(ansVoteType>0){
        Vue.set(this.q.ans[i], 'ansVotedUp', true);
        Vue.set(this.q.ans[i], 'ansVotedDown', false);
    }else{
        Vue.set(this.q.ans[i], 'ansVotedDown', true);
        Vue.set(this.q.ans[i], 'ansVotedUp', false);
    }
}

edited Jul 16, 2022 at 0:23

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 7, 2017 at 13:51

Ben

5,1494 gold badges20 silver badges26 bronze badges

1 Comment

Hkm Sadek Over a year ago

Thank you it worked :). I am sorry there is no way to accept two answers :) I ticked considering the first answer. Thank you once again!

Collectives™ on Stack Overflow

vuejs/js object changes but doesn't reflect it in the DOM

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related