Currently, I am endeavoring to iterate through an array of objects and display them as list items. There is a click listener that introduces a custom property to the object, and a class binding depends on the value of that property. Would you mind reviewing my code snippet below?
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>
The vue method voteOnAns implemented 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);
}
When this.q.ans is printed out, it correctly displays the specific object.
Furthermore, it is worth noting that when using the Vue Chrome extension, sometimes the new property is added, while other times it is not present in the object. Nonetheless, the console log consistently shows the object accurately.
If anyone could provide any assistance or offer an explanation, it would be greatly appreciated. Thank you.