javascript - vuejs/js 对象发生变化但没有反射(reflect)在 DOM 中

Question

我正在尝试遍历对象数组并打印列表项。我有一个点击监听器，它向对象添加一个自定义属性，并且类绑定(bind)依赖于该属性值。 这是我的代码，请看一下。

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 正确显示了对象。

非常感谢任何帮助或解释。 谢谢。

Answer 1

由于 Javascript 的限制，Vue can not detect property additions所以这些新属性不是 react 性的。

你必须使用 Vue.set 来动态添加响应式属性:

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