VueJS如何更新选择数据 [英] VueJS how to update data on selection
问题描述
在VueJS 2.0中,我想在选择更改时使用v-for指令更新项目的呈现。
In a VueJS 2.0 I want to update the rendering of items using a v-for directive when a selection changes.
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 here:< a href =https://jsfiddle.net/doritonimo/u1n8x97e/ =nofollow noreferrer> https://jsfiddle.net/doritonimo/u1n8x97e/
jsfiddle here: https://jsfiddle.net/doritonimo/u1n8x97e/
当所选对象从更改中获取数据时,v-for指令不会更新。当Vue中的数据发生变化时,有没有办法告诉v-for循环更新?
The v-for directive does not update when the selected object it is getting it's data from changes. Is there a way to tell the v-for loop to update when data changes in Vue?
推荐答案
你的小提琴仍然包含一些拼写错误所以它不起作用。
You fiddle still contains some typo so it doesn't work.
请检查: https://jsfiddle.net/u1n8x97e/39/
您无需存储整个选定对象。您可以保留索引。
You don't need to store the entire selected object. You can just keep the index.
<select v-model="selected">
<option v-for="(foo, i) in foobar" :value="i">{{foo.name}}</option>
</select>
现在已选择
只是一个数字:
selected: 0
并且您通过 foobar [selected]
这篇关于VueJS如何更新选择数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!