I decided to incorporate the asynchronous select feature found in the documentation for my project. This feature allows me to easily remove a selected value by clicking on 'X'.
Below is a snippet of the general component that I use across various Vue components:
<template>
<div>
<multiselect
v-model="items"
:options="filteredList"
:multiple="multiple"
:close-on-select="multiple ? false : true"
:show-labels="false"
:placeholder="placeholder"
track-by="id"
:label="label"
@input="inputChanged"
:internal-search="false"
@search-change="searchItems"
>
<template slot="clear" slot-scope="props">
<div class="multiselect__clear" v-if="items.length" @mousedown.prevent.stop="clearAll(props.search)"></div>
</template>
</multiselect>
</div>
</template>
<script>
export default {
model: {
prop: 'parentItems',
event: 'change',
},
props: ['multiple', 'list', 'placeholder', 'label', 'parentItems'],
data() {
return {
items: this.parentItems,
filteredList: this.list,
}
},
methods: {
searchItems(query) {
let q = latinize(query.toLowerCase().replace(/\s/g,''))
this.filteredList = this.list.filter(li => latinize(li[this.label].toLowerCase().replace(/\s/g,'')).includes(q))
},
inputChanged() {
this.$emit('change', this.items);
},
clearAll() {
this.items = this.multiple ? [] : null
},
},
}
</script>
Although everything functions as expected, I encountered an issue where the 'X' icon to clear selection is not being displayed.
Upon inspecting the element in the console, I noticed that the clear button had a width of 255 and a height of 0. To rectify this, I attempted to add the 'X' between the div tags like so:
<template slot="clear" slot-scope="props">
<div class="multiselect__clear" v-if="items.length"
@mousedown.prevent.stop="clearAll(props.search)"
>
X
</div>
</template>
However, this caused the 'X' to display above the select input field. Changing the height attribute via the dev console only resulted in additional space above the input field.
I am unsure of what I may be overlooking. Any insights would be greatly appreciated.