Check box selection issue in 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.

Your checkbox's v-model is bound to the same checkedChannels for each channel. I would move that prop to each Channels item if feasible, and then bind the checkbox's v-model to item.checkedChannels. Otherwise, I'd create a second container (array/hashmap) that maps the channel ID to the checkbox value, and then update the v-model to the corresponding map entry. — tony19
– tony19, Commented Jan 17, 2020 at 9:32
How does the user data looks like ? Each user should have an own "checkedChannels" field to begin with. — turbopasi
– turbopasi, Commented Jan 17, 2020 at 9:48
@PascalLamers, currently listing all channels for each user.Plan is to update depending on selection of channel. Then allowed own channel shows as checked. There should be an update button in each row. Currently am in initial stage only. — Deepu Sasidharan
– Deepu Sasidharan, Commented Jan 17, 2020 at 9:53
@tony19, can you share some code. it would be very helpful.. — Deepu Sasidharan
– Deepu Sasidharan, Commented Jan 17, 2020 at 9:54
@DeepuSasidharan pls take a look at my answer and see if it helps you . — turbopasi
– turbopasi, Commented Jan 22, 2020 at 10:23

Pratik Patel · Accepted Answer · 2020-01-17 11:59:41Z

3

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;
    })
  },

answered Jan 17, 2020 at 11:59

Pratik Patel

7,0381 gold badge20 silver badges44 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 02:09:17Z

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>

Collectives™ on Stack Overflow

Check box selection issue in vue.js

2 Answers 2

Comments

Select elements for array with checkboxes and v-model

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Select elements for array with checkboxes and v-model

Comments

Your Answer

Sign up or log in

Post as a guest

Related