Question

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

选择器数组最初是空的，然后一个AJAX调用填充数组，Vue构建HTML - 我保持下面简化的片段只是为了演示我与{{1}的问题}

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

现在这可以正常工作如果我会像这样初始化selected.fuel属性：

selected

如果我将其留空，如示例selected: { make: 'audi', fuel: 'petrol' }中所示，那么它就不会更新。我不想手动硬编码{}的所有属性，我只想在通过AJAX发送的服务器端代码中列出一次

所以我错过了一些完全明显的东西，我应该以不同的方式做这件事吗？

也许一种方法可以找到与字段名称匹配的下拉列表并返回值？只是这似乎不是一个非常Vue的事情。

＆＃13;

selected

＆＃13;

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

＆＃13;

Answer 1

这可能是因为您没有使用this.$set

在对象上设置新密钥

尝试：

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

不使用this.$set - Vue.set的别名 - 将意味着Vue不会将新密钥设置为被动，并且反过来不会关注它的任何更新，docs：{{ 3}}

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>

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

1 个答案: