Vue中的VueJS 2.0 v模型动态目标

Question

select我的Vue数据中有一个由数组构建的大约10个元素的表单.

选择器数组最初是空的,然后一个AJAX调用填充数组,Vue构建HTML - 我保持简化下面的代码段只是为了演示我遇到的问题 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不会将新密钥设置为被动,反过来也不会监视任何更新,docs:https://vuejs.org/v2/api/#vm-组

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>