VueJS如何更新選擇的數據

在VueJS 2.0中，我希望在選擇更改時使用v-for指令更新項目的呈現。VueJS如何更新選擇的數據

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循環更新？

來源

2017-03-18 Don Smythe

訪問所選擇的對象請提供的jsfiddle或codepen。您提供的代碼不完整，並且包含語法錯誤 – CodinCat

您不需要告訴vue/v-因爲您有更新。 Vue檢測變化並自動重新渲染。 – CodinCat

@CodinCat我改變了代碼，並添加了一個小提琴 - （但只是不能讓小提琴工作..） –

你小提琴仍然包含一些錯字，所以它不起作用。

請檢查：https://jsfiddle.net/u1n8x97e/39/

你並不需要存儲整個選定的對象。你可以保持索引。

<select v-model="selected"> 
    <option v-for="(foo, i) in foobar" :value="i">{{foo.name}}</option> 
</select>

現在selected只是一個數字：

selected: 0

而且你通過foobar[selected]

來源

2017-03-18 09:25:08 CodinCat

VueJS如何更新選擇的數據

回答

相關問題