CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentselect-options
user3465752
user3465752

Reputation: 21

How can I avoid ctrl in multiple select in vue.js?

I'm starting to make a multiselect without any package ...

When I create a select multiple, it is necessary key ctrl for select multiple elements.

I hate this ...

Can I make it with a function?

<template>
  <select multiple v-model="selected">
      <option v-for="item in items" v-bind:key="item.id">{{item.name}}</option>
  </select>
</template>

<script>
export default {
  name: 'SelectMultiple',
  props: {
    items: Array,
  },
  data(){
    return{
      selected: ['option1']
    }
  },
}
</script>

Upvotes: 0

Views: 526

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23500

You can try with :value instead v-model and use method on click event for selecting:

Vue.component('myselect', {
  template: `
    <div>
      <select multiple :value="selected" @click="selection">
        <option v-for="item in items" :key="item.id" :selected="isSelected(item.name)">{{item.name}}</option>
      </select>
      {{selected}}
    </div>
  `,
  props: {
    items: Array,
  },
  data(){
    return{
      selected: ['option1']
    }
  },
  methods: {
    isSelected(item) {
      return this.selected.includes(item) 
    },
    selection(e) {
      const el = e.target.value;
      if(this.selected.includes(el)){
        this.selected = this.selected.filter(s => s !== el)
      } else {
        this.selected = [...this.selected, el]
      }
    }
  }
})
new Vue({
  el: "#demo",
  data(){
    return{
      items: [{id:1, name:'option1'}, {id:2, name:'option2'}, {id:3, name:'option3'}, {id:4, name:'option4'}, {id:5, name:'option5'}]
    }
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
   <myselect :items="items"></myselect>
</div>

Upvotes: 2

Related Questions