CODEWITHSUNDEEP
vue.js
Deepu Sasidharan
Deepu Sasidharan

Reputation: 5309

Check box selection issue in vue.js

Please look the below image

enter image description here

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.

Upvotes: 2

Views: 490

Answers (2)

turbopasi
turbopasi

Reputation: 3605

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>

Upvotes: 2

Pratik Patel
Pratik Patel

Reputation: 6978

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

Upvotes: 3

Related Questions