VueJS選択時にデータを更新する方法

Question

VueJS 2.0では、選択が変更されたときにv-for指示文を使用して項目のレンダリングを更新したいとします。

HTML：

<main> 
{{ testvalue }} 
    <select v-model="selected.name"> 
    <option v-for="foo in foobar">{{foo.name}}</option> 
    </select> 
    <span>Selected: {{ selected.name }}</span> 
    <div v-for="(value, key) in selected.properties"> 
    <p>{{ key }} {{ value }}</p> 
    </div> 
</main> 

app.js

new Vue({ 
    el: 'main', 
    data: { 
     foobar: [ 
     { name: 'rex', type: 'dog', properties: [{color: 'red', sound: 'load'}] }, 
     { name: 'tike', type: 'cat', properties: [{color: 'brown', sound: 'quiet'}] }, 
     { name: 'tiny', type, 'mouse', properties: [{color: 'white', sound: 'quiet'}]} 
     ], 
     selected: { name: 'tiny', type, 'mouse', properties: [{color: 'white', sound: 'quiet'}]}, 
     testvalue: 'Test' 
    }, 
    created: function() { 
     this.selected = this.foobar[0]; 
    }, 
    mounted: function() { 
     this.selected = this.foobar[1]; 
    } 
}) 

ここjsfiddle：選択したオブジェクトは、それが変化からのデータを取得しているときhttps://jsfiddle.net/doritonimo/u1n8x97e/

V-のためのディレクティブは更新されません。 。 Vueでデータが変更されたときにv-forループに更新を指示する方法はありますか？

Answer 1

フィーリングにはいくつかの誤植が含まれているため、機能しません。

確認してください：https://jsfiddle.net/u1n8x97e/39/

あなたが全体選択したオブジェクトを格納する必要はありません。あなたは単にインデックスを保持することができます。 jsfiddleまたはcodepenを提供してください

selected: 0 

そして、あなたはfoobar[selected]