Я пытаюсь выполнить цикл и массив объектов, которые печатают элементы списка. У меня есть прослушиватель кликов, который добавляет настраиваемое свойство, а привязка класса зависит от этого значения свойства. Вот мой код, пожалуйста, посмотрите.
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>
Мой метод vue voteOnAns
выглядит так
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);
}
Здесь this.q.ans
печатает конкретный объект.
Еще одна интересная вещь: я использую расширение vue chrome, и там я вижу некоторое время, когда добавляется это новое свойство, а когда-то это их нет в объекте. Но console.log показывает объект правильно.
Любая помощь или объяснение высоко ценятся. Спасибо.
Из-за ограничений Javascript Vue не может обнаружить дополнения свойств, чтобы эти новые свойства не реагировали.
Вы должны использовать Vue.set
для динамического добавления реактивных свойств:
Vue.set(this.q.ans[i], 'ansVotedUp', true);
Вы не можете изменить значение массива непосредственно при использовании с Vue. Вам нужно будет использовать Vue.set
для обновления значения. Поскольку Vue не может определить значение, измененное при обновлении значения с помощью массива. Вы можете проверить оговорку о предоставлении списка на официальном сайте vue.
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);
}
}