Check box selection issue in vue.js - vue.js

Question

Please look the below image
I have two users and their allowed channels.
My issue is :
When I click one channel of a user, the same channel is also get checked of other user. For example:
When I click Commissions of user Deepu, the channel Commissions of user Midhun also get checked.
I have to avoid that, the clicked channel of the user should only selected, not other user's.
I tried this
<v-data-table
:headers="headers"
:items="UserChannels"
:loading="datatableloading"
class="elevation-1"
>
<template v-slot:items="props">
<td class="text-xs-left">{{ props.item.username }}</td>
<td class="text-xs-left">
<ul class="channel-listitems">
<li v-for="item in Channels">
<input type="checkbox" class="channel-checkbox" :value="item.id" v-model="checkedChannels">
{{ item.channel_name }}
</li>
</ul>
<br>
<span>Checked names: {{ checkedChannels }}</span>
</td>
</template>
</v-data-table>
I am using Vue.js for doing this.

Answer 1

You can create mapping dict for each user Channels selection.
Please refer following codepen - https://codepen.io/Pratik__007/pen/oNgaXeJ?editors=1010
In data
checkedChannels:{},
Created
created () {
console.log(this.Channels)
let vm = this;
this.Users.map(function(item){
vm.$set(vm.checkedChannels,item['name'],[])
return item;
})
},

Answer 2

The official Vue docs states, you can use v-model on multiple checkboxes using the same array. ( Docs : https://v2.vuejs.org/v2/guide/forms.html#Checkbox )
Also working example : https://codesandbox.io/s/hungry-kepler-t7mkw
Select elements for array with checkboxes and v-model
<template>
<div id="app">
<!-- First, iterate over all users -->
<div v-for="(user, index) in users" class="user">
<p class="name">{{ user.username }} - Checked Channels {{user.channels}}</p>
<!-- Create checkbox for each available channel, and v-model it to user.channels -->
<div class="channel">
<label v-for="(channel, index) in availableChannels">
{{channel}}
<input type="checkbox" v-bind:value="channel" v-model="user.channels">
</label>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
users: [
{
username: "User1",
channels: ["channel1", "channel2"]
},
{
username: "User2",
channels: ["channel3"]
}
],
availableChannels: [
"channel1",
"channel2",
"channel3",
"channel4",
"channel5"
]
};
}
};
</script>
<style>
.user {
min-height: 100px;
display: flex;
align-items: center;
border: 1px solid black;
margin-bottom: 10px;
justify-items: center;
}
.name,
.channel {
flex: 1;
}
.channel {
min-height: 100px;
display: flex;
flex-direction: column;
}
</style>