Vue.js - Komponentendaten werden nicht aktualisiert

Question

Ich habe eine Vue-Liste, die auf einem Array basiert, und jedes Array-Element rendert eine Komponente, an die ich die Array-Elementeigenschaften anbinde.

<div v-for="item in items"> 
     <item v-bind:item="item"></item> 
    </div> 

Diese Komponente hat ein gemischten Daten, basierend auf den binded Eigenschaften

Vue.component('item', { 
    template: '<p>ID: {{item.id}}, {{component_id}}</p>', 
    props: ['item'], 
    data: function() { 
    return { 
     component_id: this.item.id 
    } 
    } 
}); 

Das Problem ist, dass, wenn ich die erste Liste Array in irgendeiner Weise zu ändern, die gemischte prop des Bauteils hält es original update und ändert sich nicht, auch wenn sich die ursprünglichen binded Daten ändern.

http://codepen.io/anything/pen/bgQBwQ

Wie kann ich die Komponente machen es ow Daten Eigenschaft zu aktualisieren?

Answer 1

Wie in Form einer Antwort angefordert:

In diesem Fall wird ein computed property ist der richtige Ansatz, wie dem folgenden Code führt:

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; 
    } 
    } 
}); 

Auf diese Weise die computed_id (richtig) neu berechnet werden jedes Mal, wenn sich die item Requisite ändert.