v-for 中的 VueJS 2.0 v-model 动态目标

Question

我有一个表单，其中包含大约 10 个 select 元素，这些元素是从我的 Vue 数据中的一个数组构建的。

选择器数组最初是空的，然后 AJAX 调用填充数组，Vue 构建 HTML - 我简化了下面的 sn-p 只是为了演示我遇到的问题 v-model

我想创建一个包含所有选定值的对象，因此我尝试按照下面的示例使用v-model="selected[ selector.name ]"。 我希望能够轻松地询问selected.make 或selected.fuel

现在这可行如果我像这样初始化selected 属性：

selected: { make: 'audi', fuel: 'petrol' }

如果我将其留空，如示例中的{}，则不会更新。 我不想手动硬编码selected 的所有属性，我只想在通过 AJAX 发送的服务器端代码中列出一次

那么我是否遗漏了一些非常明显的东西，我应该以不同的方式来做这件事吗？

也许一种方法可以找到匹配字段名称并返回值的下拉列表？只是这看起来不像是 Vue 要做的事情。

var app = new Vue({
	el: '#example',
	data: {
		selectors: [
			{
				name: 'make',
				options: ['audi','bmw']
			},
			{
				name: 'fuel',
				options: ['petrol','diesel']
			}
		],
		selected: {}
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>

<div id="example">

<template v-for="selector in selectors">
  <select v-model="selected[ selector.name ]">
    <option v-for="option in selector.options">{{option}}</option>
  </select>
</template>
  
<p>
  {{selected.make}}
  <br />
  {{selected.fuel}}
</p>
  
</div>

Answer 1

这可能是因为您没有在 this.$set 的对象上设置新键

尝试：

this.$set(this.selected, 'make', 'audi')

不使用 this.$set - Vue.set 的别名 - 意味着 Vue 不会将新密钥设置为响应式，反过来也不会关注它的任何更新，文档：https://vuejs.org/v2/api/#vm-set

var app = new Vue({
    el: '#example',
    data: {
        selectors: [{
            name: 'make',
            options: ['audi', 'bmw']
        }, {
            name: 'fuel',
            options: ['petrol', 'diesel']
        }],
        selected: null,
    },
    created () {
        // this would happen following your ajax request - but as an example this should suffice
        this.selected = {}
        this.selectors
            .forEach((selector) => {

                this.$set(this.selected, selector.name, '')

            })

    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="example">

    <div v-if="selected">

        <select v-model="selected[selector.name]" v-for="selector in selectors">
            <option :value="option" v-for="option in selector.options">
                {{option}}
            </option>
        </select>

        <p>make: {{selected.make}}<p>
        
        <p>fuel: {{selected.fuel}}</p>
        
        <pre>{{ selected }}</pre>

    </div>

</div>