Vuejs multiple checkbox not working with v-model

Question

I have these two content types with many to many relationships. Size and Menu Now in the current situation, I have created a size, assigned multiple menus, when I try to edit the size. the menus checkboxes are not reactive as you can see in the GIF, 5 menus are selected but when I uncheck one menu, two menus get unchecked. I don't know what I am missing here.

GIF

Input

<label v-for="(type,i) in menus" :key="i">
   <p-check color="danger" name="ctype" class="p-default text-sm" v-model="contentTypes" :value="type.id">
        <span class="text-base capitalize font-medium">{{type.title}}</span>
   </p-check>
</label>

Computed Method

contentTypes: {
    get: function () {
       return this.editingTable.data.menus.map(e => e.id)
    },
    set: function (value) {
       console.log(value)
    }
},

Thanks

Is your `type.id` is unique as you store in the `v-model`??. Try the key as `:key='type.id'` — tuhin47, Nov 08 '20 at 06:19

score 1 · Answer 1 · answered Nov 08 '20 at 07:50

Can you make a jsFiddle and share us the link for this? I am not really sure why you are using the Computed for your case, if for me, I would have just add a parameter(isChecked) in your menu object.

<label v-for="(type,i) in menus" :key="i">
   <p-check color="danger" name="ctype" class="p-default text-sm" v-model="type.isChecked" :value="type.id">
        <span class="text-base capitalize font-medium">{{type.title}}</span>
   </p-check>
</label>

Or maybe the checkbox package that you are using support group checkbox?

score 0 · Answer 2 · answered Nov 08 '20 at 16:42

If your goal is to dynamically update athe array contentTypes with the IDs of the selected elements of the object menus, you may want to:

as suggested by @markcc, add a property checked to elements of the menusarray, and linking this property through the v-model directive (1)
add a computed property contentTypes which reduces the menus array to an array of the selected elements IDs (2)
for development, add a watcher on the contentTypes property to log its changes (3)

Here is the pseudo code:

<template>
    <div>
        <!-- (1) -->
        <p-check v-for="type in menus" :key="type.id" v-model="type.checked">
            <span>{{type.title}}</span>
        </p-check>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // (1)
            menus: [
                {id: 1, checked: false, title: 'type 1'},
                {id: 2, checked: false, title: 'type 2'}
            ]
        }
    },
    computed: {
        // (2)
        contentTypes() {
            return this.menus.reduce(
                (acc, type) => {
                    if (type.checked) acc.push(type.id)
                    return acc}
                    , []
            )
        }
    },
    watch: {
        // (3) - in this usecase, only for developement 
        contentTypes(value) {
            console.log(value)      
        }
    }
}
</script>

Agree with your answer but here in my case menus are coming from the backend via apollo. How can we possibly put a checked field there? — Amir Ur Rehman, Nov 08 '20 at 19:33
apollo: { menus() { return { query: menus, update(data) { return data.menus; }, }; }, } — Amir Ur Rehman, Nov 08 '20 at 19:33

Vuejs multiple checkbox not working with v-model

2 Answers2