v-for中的Vue动态v-模型

Question

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

<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模型未绑定到data属性。 我现在如何正确通过？ 数据属性名称将是任何name 。

Answer 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[key]一样访问selected因此我们可以轻松地将复选框绑定到该属性。

完整的例子

 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>