반응형
Vue.js - 컴포넌트 데이터가 갱신되지 않음
어레이를 기반으로 하는 Vue 목록이 있으며 각 어레이 항목은 어레이 항목 속성을 바인딩하는 구성 요소를 렌더링합니다.
<div v-for="item in items">
<item v-bind:item="item"></item>
</div>
이 구성 요소에는 바인딩된 속성을 기준으로 혼합된 데이터가 있습니다.
Vue.component('item', {
template: '<p>ID: {{item.id}}, {{component_id}}</p>',
props: ['item'],
data: function() {
return {
component_id: this.item.id
}
}
});
문제는 초기 목록 배열을 변경할 때 컴포넌트의 혼합된 프로포트가 원래 업데이트를 유지하며 원래 바인딩된 데이터가 변경되어도 변경되지 않는다는 것입니다.
http://codepen.io/anything/pen/bgQBwQ
ow 데이터 속성을 갱신하는 컴포넌트를 만들려면 어떻게 해야 하나요?
답변 형식으로 요청하신 대로:
이 경우 계산된 속성이 올바른 접근법이며 다음과 같은 코드가 생성됩니다.
Vue.component('item', {
template: '<p>Original: {{item.id}}, Mixed: {{component_id}}, Computed: {{computed_id}}</p>',
props: ['item'],
computed: {
computed_id: function() {
return this.item.id;
}
}
});
이쪽에서computed_id
매번 재계산됩니다.item
변경.
언급URL : https://stackoverflow.com/questions/42160135/vue-js-components-data-do-not-update
반응형
'programing' 카테고리의 다른 글
Firebase + Vue를 사용하여 웹 앱을 구축할 때 Vuex가 꼭 필요한가요? (0) | 2022.07.31 |
---|---|
오류: 주 클래스를 찾거나 로드할 수 없습니다. (0) | 2022.07.31 |
Vue 저장소의 변환에 두 번째 매개 변수를 보낼 수 없습니다. (0) | 2022.07.31 |
개체 목록을 속성별로 정렬하는 방법 (0) | 2022.07.31 |
goal org.apache.maven을 실행하지 못했습니다.플러그인: maven-displicate-displicate: 2.3.2: 디폴트 설정(default-displicate) (0) | 2022.07.31 |