vuejs/js 객체가 변경되지만 DOM에 반영되지 않습니다.

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는 this.q.ans 인쇄 특정 개체를 올바르게 여기

}이

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

것 같습니다.

또 다른 흥미로운 점은 vue 크롬 확장 기능을 사용하고 있으며이 새로운 속성이 추가 된 시간이 얼마 남지 않았으며 언젠가는 개체에 없습니다. 그러나 console.log는 개체를 올바르게 표시합니다.

도움이나 설명을 보내 주시면 감사하겠습니다. 감사합니다.

Answer 1

Javascript의 제한으로 인해 Vue can not detect property additions이므로 새 속성이 반응하지 않습니다.

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

Answer 2

당신은 뷰와 직접 때 사용하는 배열 값을 변경할 수 없습니다 :

는 동적으로 반응 속성을 추가 할 수 Vue.set을 사용해야합니다. 당신이해야 할 일은 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); 
    } 
}