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
– tuhin47, Commented Nov 8, 2020 at 6:19

markcc · Accepted Answer · 2020-11-08 07:50:43Z

1

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?

answered Nov 8, 2020 at 7:50

markcc

6433 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Elise Patrikainen · Accepted Answer · 2020-11-08 16:42:59Z

0

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>

answered Nov 8, 2020 at 16:42

Elise Patrikainen

3432 silver badges9 bronze badges

2 Comments

Amir Ur Rehman Over a year ago

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 Over a year ago

apollo: { menus() { return { query: menus, update(data) { return data.menus; }, }; }, }

Collectives™ on Stack Overflow

Vuejs multiple checkbox not working with v-model

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related