Vue Dynamic V-model Within V-for

I have the following fieldsets containing checkboxes:

Copy

and you should loop using v-for like :

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

newVue({
  el: '#app',

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

        }
      }
    }

  }
 
});

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