vuejs model for checkbox group

Question

I have 2 arrays one for possible checkbox variants and one for already saved-checked boxes.VUEJS template for example

<ul>
                <li v-for="cit in possable">
                    <label>
                    <input  
                        type="checkbox"
                        :checked="savedcbx.indexOf(+cit.id)>-1"
                        :value="cit.id"/>
                    {{cit.rname}}
                    </label>
                </li>
            </ul>

And my question about how add new checkedbox to saved array or delete from saved array uncheckedbox&

Answer 1

You only need one array to achieve toggling. From the Arrays section of Vue.js docs:

HTML:

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

Vue app:

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})