Vue中的VueJS 2.0 v模型动态目标 [英] VueJS 2.0 v-model dynamic target inside v-for

问题描述

我的表格中有一个大约10 选择元素，这些元素是从我的Vue数据中的数组构建的。

I've got a form with about 10 select elements built from an array in my Vue data.

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

The array of selectors is empty initially and then an AJAX call populates the array and Vue builds the HTML - I've kept the snippet below simplified just to demonstrate the issue I'm having with v-model

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

I want to create an object that has all the selected values in it, so I'm trying to use v-model="selected[ selector.name ]" as per the example below. I want to easily be able to ask for selected.make or selected.fuel

现在这个工作如果我初始化选择的属性，如下所示：

Now this works if I initialize the selected property like this:

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

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

If I leave it blank, like in the example, {}, then it doesn't get updated. I don't want to manually hardcode all the properties of selected, I only want to be listing them once in the server side code that gets sent via AJAX

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

So am I missing something completely obvious, should I be doing this in a different way?

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

Maybe a method to find the dropdown that matches a field name and returns the value? Just that doesn't seem like a very Vue thing to do.

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>

推荐答案

这可能是因为你没有在这个对象上设置新密钥。$ set

it's probably becuase you're not setting new keys on an object with this.$set

尝试：

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

不使用这个。$ set - 别名 Vue。设置 - 意味着Vue不会将新密钥设置为被动，反过来也不会监视任何更新，docs： https://vuejs.org/v2/api/#vm-set

Not using this.$set - alias of Vue.set - will mean Vue doesn't set the new key as reactive, and in turn won't be watching for any updates to it, docs: 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>

这篇关于Vue中的VueJS 2.0 v模型动态目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！