Vue динамическая v-модель в рамках v-for

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-модель не связана со свойством данных.Как мне правильно пройти это сейчас?Имя свойства данных будет таким, каким является name.

Answer 1

Чтобы в данной ситуации вы поместили эти свойства (level, subject, delivery) внутри объекта с именем selected следующим образом:

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

, и вы должны выполнить цикл, используя v-for like:

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

        }
      }
    }

  }
 
});

{{value}} ({{count}})

{{selected}}