>  기사  >  웹 프론트엔드  >  Vue에서 객체 속성이 변경될 때 뷰가 업데이트되지 않는 문제를 어떻게 처리합니까?

Vue에서 객체 속성이 변경될 때 뷰가 업데이트되지 않는 문제를 어떻게 처리합니까?

亚连
亚连원래의
2018-06-05 13:45:502795검색

아래에서는 Vue에서 객체 속성이 변경될 때 뷰가 업데이트되지 않는 문제를 해결하는 기사를 공유하겠습니다. 좋은 참조 값이 있으며 모든 사람에게 도움이 되기를 바랍니다.

일반적으로 vue 인스턴스의 데이터에 응답 데이터를 설정합니다. 그러나 데이터가 객체이고 객체 속성 값을 추가하거나 삭제하면 뷰가 업데이트를 트리거하지 않습니다. 이 문제를 해결하는 방법은 무엇입니까?

예제 코드는 다음과 같습니다.

let vm = new Vue{
 el: '#app',
 data: {
  obj: {
    k: 'v'
  }
 },
 ...
}

세 가지 솔루션이 있습니다.

옵션 1: Vue.set(object,key,val) 사용

예: Vue .set( vm.obj,'k1','v1')

옵션 2:이것을 사용하세요.$set(this.obj,key,val)

예: this.$set(this.obj ,'k1', 'v1')

옵션 3: Object.sign({}, this.obj)을 사용하여 새 개체 만들기

예:

 this.obj.k1='v1';
 this.obj = Object.assign({}, this.obj)

또는

this.obj = Object.assign({}, this.obj,{'k1','v1'})

위 내용은 제가 정리한 내용입니다. 여러분, 앞으로 모든 분들께 도움이 되었으면 좋겠습니다.

관련 기사:

AngularJS의 테이블을 통해 쿼리 메소드를 추가, 삭제, 수정하는 방법

ExtJ를 사용하여 Echarts를 통합하는 방법(자세한 튜토리얼)

AngularJS에서 div 메소드를 동적으로 추가하고 삭제하는 방법

위 내용은 Vue에서 객체 속성이 변경될 때 뷰가 업데이트되지 않는 문제를 어떻게 처리합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.