Vue.js - 구성 요소 데이터가 업데이트되지 않습니다.

Question

배열을 기반으로하는 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는

가 어떻게 구성 요소를 만들 수 있습니다 는 흐름 데이터 속성의 업데이트?

답변의 형태로 요청으로

Answer 1

다음 computed_id이 (제대로)입니다이 방법은 재 계산

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 property 올바른 방법입니다 때마다 item 소품 변경.