Multiple Checkbox selected elements pass to array and from another array show selected as checked in vue js

Question

Am very new to vue js and need a way where I have multiple checkboxes and when I select them an array gets updated with the checked elements with Vue JS. Eg :

allcolors = ['Red', 'Blue', 'Green']; and I select first two so my

selectedColors = ['Red', 'Blue']; and then click saves, saves it to database.

When I open the form Red and Blue gets checked fetching record from database.

fetchedColors = ['Red', 'Blue'];

Answer 1

 new Vue({ el: "#app", data: { items: [ { label: 'Red', value: 'red' }, { label: 'Blue', value: 'blue' }, { label: 'Green', value: 'green' }, ], checkedValues: [], }, })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <label v-for="(item, index) in items" :key="index" > {{ item.label }} <input type="checkbox" :value="item.value" v-model="checkedValues" /> </label> {{ checkedValues }} </div>

Not really sure what you're asking. Do you mean something like this? Check the docs they may help - https://v2.vuejs.org/v2/guide/forms.html#Checkbox

Answer 2

 new Vue({ el: "#app", data: { items: [ { label: 'Red', checked: true }, { label: 'Blue', checked: true }, { label: 'Green', checked: false }, ], }, })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <label v-for="(item, index) in items" :key="index" > {{ item.label }} <input type="checkbox" :checked="item.checked" @change="({ target: { checked }}) => items[index].checked = checked" /> </label> </div>

If you want to show checkboxes that are checked when the form displays you could do something like this.