Question

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

<form action="/action_page.php">
Email: <input type="text" name="email"><br>
Pin: <input type="text" name="pin" maxlength="4"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>

注意这里有些重复，但是可以。这是我的Vue实例：

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

我想要更多类似这样的东西，所以我不必重复相同的块：

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

但是，这不起作用，而且似乎v模型未绑定到data属性。我现在如何正确通过？数据属性名称将为<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>。

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之类的索引，使用{{1} }项，我们可以像key一样访问selected，因此我们可以轻松地将复选框绑定到该属性。

完整示例

selected[key]

new Vue({
  el: '#app',

  data() {
    return {
      selected: {
        level: [],
        subject: [],
        delivery: []
      },
      availableFilters: {
        level: {
          "UG": 12,
          "PG": 12,
        },
        subject: {

        }
      }
    }

  }
 
});

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

1 个答案: