Question

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

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因此这些新属性不具有反应性。

您必须使用Vue.set动态添加反应属性：

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

Answer 2

使用Vue时，无法直接更改数组值。您需要做的是使用Vue.set更新值。因为Vue在使用数组更新值时无法检测到更改的值。您可以查看vue官方网站上的list rendering caveat。

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);
    }
}

vuejs / js对象发生了变化，但没有在DOM中反映出来

2 个答案: