v-for 中的 Vue 动态 v-model [英] Vue dynamic v-model within v-for

问题描述

我有以下包含复选框的字段集:

<label v-for="(count, value) in availableFilters.level"><input type="checkbox" data-filterName="level" :value="value" v-model="level" @change="(e) => handleCheckbox(e, 'level')">{{value}} ({{count}})</label></fieldset><字段集><label v-for="(count, value) in availableFilters.subject"><input type="checkbox" data-filterName="subject" :value="value" v-model="subject" @change="(e) => handleCheckbox(e, 'subject')">{{value}} ({{count}})</label></fieldset><字段集><label v-for="(count, value) in availableFilters.delivery"><input type="checkbox" data-filterName="delivery" :value="value" v-model="name" @change="(e) => handleCheckbox(e, 'delivery')">{{value}} ({{count}})</label></fieldset>

注意这里有一些重复，但它有效.这是我的 Vue 实例:

var vm = new Vue({el: '#app',数据: {等级: []，主题: []，送货: []，可用过滤器:{等级: {UG":12，PG":12，}}},...

我想要更像这样的东西，所以我不必再次重复相同的块:

<label v-for="(count, value) in filters"><input type="checkbox" :data-filterName="name" :value="value" v-model="name" @change="(e) => handleCheckbox(e, name, value)">{{value}} ({{count}})</fieldset>

然而，这不起作用，而且似乎 v-model 没有绑定到 data 属性.我现在如何正确通过它?数据属性名称将是 name 的任何名称.

解决方案

对于这种情况，你应该把属性 (level, subject, delivery) 在一个名为 selected 的对象中，如下所示:

 选择:{等级: []，主题: []，送货: []}

并且您应该使用 v-for 循环，例如:

其中 filters 表示值，key 表示键，例如 level，ìndex 表示索引，例如0，使用 key 项我们可以访问 selected 就像 selected[key] 这样我们就可以将复选框绑定到那个属性很容易.

完整示例

new Vue({el: '#app',数据() {返回 {选择:{等级: []，主题: []，送货: []},可用过滤器:{等级: {UG":12，PG":12，},主题: {}}}}});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script><div id="app" class="container"><fieldset v-for="(filters, key,index) in availableFilters"><label v-for="(count, value) in filters"><input type="checkbox" :data-filterName="this[filters]" :value="value" v-model="selected[key]" @change="onchange">{{value}} ({{count}})</fieldset><pre>{{selected}}</pre>

I have the following fieldsets containing checkboxes:

<fieldset>
    <label v-for="(count, value) in availableFilters.level"><input type="checkbox" data-filterName="level" :value="value" v-model="level" @change="(e) => handleCheckbox(e, 'level')"> {{value}} ({{count}})</label>
</fieldset>
<fieldset>
    <label v-for="(count, value) in availableFilters.subject"><input type="checkbox" data-filterName="subject" :value="value" v-model="subject" @change="(e) => handleCheckbox(e, 'subject')"> {{value}} ({{count}})</label>
</fieldset>
<fieldset>
    <label v-for="(count, value) in availableFilters.delivery"><input type="checkbox" data-filterName="delivery" :value="value" v-model="name" @change="(e) => handleCheckbox(e, 'delivery')"> {{value}} ({{count}})</label>
</fieldset>

Notice there's a bit of repetition here, but it works. Here's my Vue instance:

var vm = new Vue({
    el: '#app',
    data: {
        level: [],
        subject: [],
        delivery: [],
        availableFilters: {
            level: {
                "UG": 12,
                "PG": 12,
            }
        }
    },
    ...

I want something more like this so I don't have to repeat the same block over again:

<fieldset v-for="(filters, name) in availableFilters">
    <label v-for="(count, value) in filters">
        <input type="checkbox" :data-filterName="name" :value="value" v-model="name" @change="(e) => handleCheckbox(e, name, value)"> {{value}} ({{count}})
    </label>
</fieldset>

However, this doesn't work and it seems that the v-model is not bound to the data property. How do I correctly pass that now? The data property name will be whatever name is.

解决方案

To with situation you should put that properties (level, subject, delivery) inside an object called selected as follows :

 selected: {
    level: [],
    subject: [],
    delivery: []
  } 

and you should loop using v-for like :

       <fieldset v-for="(filters, key,index) in availableFilters">

where the filters represents the value, key represents the key like level and ìndex represents the index such 0, using the key item we could access selected like selected[key] so we could bind the checkbox to that property easily.

Full example

new Vue({
  el: '#app',

  data() {
    return {
      selected: {
        level: [],
        subject: [],
        delivery: []
      },
      availableFilters: {
        level: {
          "UG": 12,
          "PG": 12,
        },
        subject: {

        }
      }
    }

  }
 
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <fieldset v-for="(filters, key,index) in availableFilters">
    <label v-for="(count, value) in filters">
        <input type="checkbox" :data-filterName="this[filters]" :value="value"  v-model="selected[key]" @change="onchange"> {{value}} ({{count}})
    </label>
  </fieldset>
  <pre>{{selected}}</pre>
</div>

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