объект vuejs / js изменяется, но не отражается в DOM

1

Я пытаюсь выполнить цикл и массив объектов, которые печатают элементы списка. У меня есть прослушиватель кликов, который добавляет настраиваемое свойство, а привязка класса зависит от этого значения свойства. Вот мой код, пожалуйста, посмотрите.

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 показывает объект правильно.

Любая помощь или объяснение высоко ценятся. Спасибо.

Теги:
vue.js
vuejs2

2 ответа

1
Лучший ответ

Из-за ограничений Javascript Vue не может обнаружить дополнения свойств, чтобы эти новые свойства не реагировали.

Вы должны использовать Vue.set для динамического добавления реактивных свойств:

Vue.set(this.q.ans[i], 'ansVotedUp', true);
  • 0
    Спасибо. Это работало хорошо.
1

Вы не можете изменить значение массива непосредственно при использовании с 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);
    }
}
  • 0
    Спасибо, это сработало :). Прошу прощения, что нет возможности принять два ответа :) Я поставил галочку, учитывая первый ответ. Спасибо еще раз!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню