v-for 中的 Vue 动态 v-model答案

【问题标题】：Vue dynamic v-model within v-forv-for 中的 Vue 动态 v-model
【发布时间】：2018-12-19 15:29:04
【问题描述】：

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

<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>

请注意这里有一些重复，但它有效。这是我的 Vue 实例：

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

我想要更多这样的东西，这样我就不必重复相同的块了：

<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>

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

【问题讨论】：

我认为你应该这样做v-model="availableFilters[name]"
这不是我要引用的属性。 availableFilters 有一个名为“level”的键，但它是我试图连接的 data.level。我什至尝试过 vm[name] 但 vm（访问其数据的 Vue 实例）是未定义的。
是的，我明白你的意思，你希望选定的项目在level 数组中吗？
是的。但是现在不确定如何在 v-for 中定义 v-model。

标签： javascript vue.js vuejs2

【解决方案1】：

对于这种情况，您应该将这些属性（level、subject、delivery）放在名为 selected 的对象中，如下所示：

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

您应该使用v-for 循环：

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

其中filters 代表值，key 代表键，例如level，ìndex 代表索引，例如0，使用key 项目我们可以访问selected，例如selected[key]这样我们就可以轻松地将复选框绑定到该属性。

完整示例

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>

【讨论】：