증가 할 때 vue.js 데이터가 업데이트되지 않습니다.

Question

일부 논리가 완료된 후에 증가하는 배열을 포함하는 객체가 있습니다.

Vue.js가이 증가분을 캡처하여보기에 표시하지 않는 것 같습니다.

HTML :

<div id="demo"> 
    <p>{{points}}</p> 
</div> 

JS :

function Board() 
{ 
    this.team1 = {pointsMade:[0]}; 
} 

var newBoard = new Board(); 

newBoard.team1.pointsMade[0]++ 


new Vue({ 
    el: '#demo', 
    data: { 
    points: newBoard.team1.pointsMade 
    } 
}) 

setTimeout(newBoard.team1.pointsMade[0]++,1000) 

나는 문제를 요약합니다 JSFiddle 있습니다.

setTimeout(newBoard.team1.pointsMade[0]++,1000) 실행 후 값은 '2'로 표시되지만 '1'로만 표시됩니다. 내가 여기서 무엇을 놓치고 있니?

Answer 1

당신이

data: { 
    points: newBoard.team1.pointsMade[0] 
    } 

을 정의 할 때 points 변수가 바로이 순간에 1입니다 newBoard.team1.pointsMade[0]의 현재 값을 할당한다. 여기에는 마법이 없습니다. JS 프리미티브는 참조가 아닌 값으로 작동합니다.

따라서 newBoard.team1.pointsMade[0] 변수를 업데이트 한 후에 point 변수가 물론 업데이트되지 않습니다.

이 작업을하려면 기본 값 대신 object를 사용하십시오. 객체는 JS에서 참조로 작동합니다. Properties and Methods 예에서

:

var data = { a: 1 } 
var vm = new Vue({ 
    data: data 
}) 
vm.a === data.a // -> true 
// setting the property also affects original data 
vm.a = 2 
data.a // -> 2 
// ... and vice-versa 
data.a = 3 
vm.a // -> 3 

편집

여기에 또 다른 caveat있다 : 당신이 직접 인덱스 항목을 설정할 때 때문에 자바 스크립트의 제한

, 뷰는 감지 할 수 없습니다 , 예. vm.items[indexOfItem] = newValue. 따라서 Vue.set(newBoard.team1.pointsMade, 0, newBoard.team1.pointsMade[0] + 1);을 사용하십시오.

fiddle가 업데이트되었습니다.