Recently, I decided to create a custom multiselect feature without using any pre-made packages.
However, I found it frustrating that in order to select multiple elements, I had to use the ctrl key.
This functionality was not user-friendly, and I wanted to create a solution using a custom function instead.
Here's a sample code snippet showcasing how I approached this challenge:
<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>