Vue에서 배열을 수정할 때 페이지가 렌더링되지 않는 문제를 다음 표를 통해 해결하세요.

이제 Vue에서 배열을 수정하면 페이지가 렌더링되지 않는 문제를 다음 표를 통해 해결하는 글을 공유하겠습니다. 매우 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

Vue가 모델 상태의 변화를 모니터링할 수 있는 이유는 JavaScript 언어 자체가 객체 상태의 변화를 모니터링하는 Proxy 또는 Object.observe() 메커니즘을 제공하기 때문입니다. 그러나 배열 요소의 할당을 직접 모니터링할 수 있는 방법은 없습니다. 따라서 배열 요소에 값을 직접 할당하면

vm.todos[0] = {
  name: 'New name',
  description: 'New description'
};

로 인해 Vue가 뷰를 업데이트할 수 없게 됩니다.

올바른 방법은 배열 요소에 값을 할당하는 것이 아니라 업데이트하는 것입니다.

vm.todos[0].name = 'New name';
vm.todos[0].description = 'New description';

또는 splice() 메서드를 통해 요소를 삭제한 후 다른 요소를 추가하여 " 할당":

var index = 0;
var newElement = {...};
vm.todos.splice(index, 1, newElement);

Vue는 배열의 스플라이스, 푸시, 이동 해제 및 기타 메서드 호출을 모니터링할 수 있으므로 위 코드가 뷰를 올바르게 업데이트할 수 있습니다.

위 내용을 정리했습니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

사용을 사용하여 Vue 전역 구성 요소 및 전역 지침을 등록하는 방법

vue.js가 CSS 라이브러리(elementUi)를 가져오는 방법에 대한 간략한 설명

JS 코드를 사용하여 QR 코드 및 함수 생성(자세한 튜토리얼)

위 내용은 Vue에서 배열을 수정할 때 페이지가 렌더링되지 않는 문제를 다음 표를 통해 해결하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!