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如何更新选择的数据

回答

相关问题