이번에는 vue.js에서 $set를 사용하여 an 배열을 업데이트하는 방법을 보여 드리겠습니다. vue.js에서 $set를 배열로 업데이트할 때 주의 사항은 무엇입니까? .
JavaScript의 제한으로 인해 Vue는 다음과 같은 변경된 배열을 감지할 수 없습니다.
배열 항목을 직접 설정하기 위해index를 사용하는 경우, 예: vm.items[indexOfItem] = newValue
배열의 길이를 수정하면(예: vm.items.length = newLength) 배열이 업데이트되지 않습니다. 물론 vue에는 Vue.set, vm.$set(Vue.set의 변형) 또는 splice, caoncat 등을 사용하여 배열을 수정하는 솔루션이 있습니다. statusex :
따라서 인스턴스가 생성된 후 인스턴스에 새 속성을 추가하면 업데이트가 트리거되지 않습니다.
ps: 이제 arr1과 arr2라는 두 개의 배열이 있습니다. arr1이 첨자 할당으로 배열을 변경하고 arr2가 $set으로 배열을 변경하면 결과는 어떻게 될까요? 아래 첨자 인덱스를 기반으로 배열을 변경하면 상태 업데이트가 트리거될 수 없다는 처음에 말한 내용을 바탕으로 우리는 다음을 알 수 있습니다. 첫 번째 배열의 두 번째 변경 사항은 페이지에서 업데이트되지 않고 두 번째 배열은 페이지에서 업데이트됩니다. 그러나 결과는 다음과 같습니다. data:{
arr1 = ['a','b','c'];
arr2 = [‘foo','bar','baz'];
}
vm.arr1[1] = 'alpha';
vm.$set(vm.arr2, 1, 'alpha');로그인 후 복사
arr1 = ['a', 'alpha', 'b', 'c']; arr2 = [‘foo', 'alpha', 'bar','baz'];
두 배열의 값이 모두 업데이트됩니다. 즉, $set() 메서드를 사용하여 arr2가 업데이트되면 페이지가 완전히 업데이트됩니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
vue.js 배열 위치를 이동하고 뷰를 업데이트하는 방법Vue에서 vue2-highcharts 사용에 대한 자세한 그래픽 설명위 내용은 vue.js에서 $set 배열을 업데이트하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
