VueJS如何更新选择数据答案

【问题标题】：VueJS how to update data on selectionVueJS如何更新选择数据
【发布时间】：2017-03-18 03:56:58
【问题描述】：

在 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-for 指令不会在选择的对象从更改中获取数据时更新。有没有办法告诉 v-for 循环在 Vue 中的数据发生变化时更新？

【问题讨论】：

请提供 jsfiddle 或 codepen。您提供的代码不完整，包含语法错误
你不需要告诉 vue/v-因为你有更新。 Vue 会自动检测更改并重新渲染。
@CodinCat 我更改了代码并添加了一个小提琴 - （但无法让小提琴工作..）
它不起作用的原因之一是因为 data 属性必须是一个函数。但即便如此，小提琴也不起作用
@Potray 数据属性在使用单个文件 .vue 模板时必须是一个函数，而不是像这里那样用于分隔的 javascript 和 html（我为块添加了名称以便其他人也清楚）。我的原始代码实际上是写在一个文件中，但是当我将它转换为 jsfiddle 时，我无法运行任何东西。

标签： javascript vue.js vuejs2

【解决方案1】：

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

请查看：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]访问所选对象

【讨论】：