How do I clear the input entered in a Vue multiselect? I have this Vue multiselect, and I want to clear the search input (what's circled in yellow) when I select an item from the dropdown (circled in red). But I want to keep the input preserved until I change the dropdown selection (thus, I have clear-on-select set to false).
Here is my multiselect.
<vue-multiselect
v-model="selected[generic]"
:options="available[generic]"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:show-labels="false"
:preserve-search="true"
:placeholder="description"
label="name"
:loading="targetsIsLoading"
#search-change="inputEntered"
track-by="uuid">
<template slot="selection" slot-scope="{ values, search, isOpen }">
<span class="multiselect__single" v-if="available[generic].length && !isOpen">{{values.length}} options selected</span>
</template>
</vue-multiselect>
Related
I'm losing the text highlighting when using the slots
https://codepen.io/dhika345/pen/vYZEXNo
I've used parent.genFilteredText(item.title) but doesn't solve it. I don't know what it is actually
You can comment the item and selection slots and click the v-autocomplete box to see the difference
you have to omitted hide-selected in v-autocomplete tag and after that, you need to use the below code inside v-autocomplete tag.
code:
<template
slot="item"
slot-scope="{ parent, item, tile }"
>
<v-list-tile-content>
<v-list-tile-title
v-html="parent.genFilteredText(item.title)"
>
</v-list-tile-title>
</v-list-tile-content>
</template>
I am trying to select multiple items in my Vuetify v-select component, but instead of showing them (in a line or using chips) I would like the text to just say 'selected'. New to Vue so not really sure where to start, but here's my code for the v-select component:
<v-select
v-else-if="isMobile"
class="customizable-dropdown"
:items="getSortedItems"
:label="$t('dropdown.label.all')"
multiple
rounded
single-line
#change="onChange"
>
</v-select>
Just use the selection slot to customize the display of the selected item...
<template v-slot:selection="{ item, index }">
<span class="pr-3">{{ item }}</span>
</template>
Demo
I have added code for v-tooltip but it doesn't display when I hover the combobox , do you see mistakes or in the order of the code, let me know, please.Thanks .
<template>
<div>
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-combobox
bottom
chips
:items="items"
label="Choose videos"
multiple
/>
</template>
<span>Left tooltip aaaaaaaaaaaaaaaaaaaaaaa</span>
</v-tooltip>
</div>
</template>
When I hover the combobox , nothing happens
You're not applying the activator slot attributes.
Secondly, the combo box creates a parent element that wraps the input that the activator attributes bind to.
This breaks the tooltip, causing it to only trigger when the box input is clicked on.
What you need to do is also wrap your combo box in a div and apply the activator to the div like this:
<template>
<div>
<v-tooltip top>
<template #activator="{on, attrs}">
<div multiple v-on="on">
<v-combobox
bottom
chips
:items="items"
label="Choose videos"
v-bind="attrs"
/>
</div>
</template>
<span>Left tooltip aaaaaaaaaaaaaaaaaaaaaaa</span>
</v-tooltip>
</div>
</template>
This same fix also applies to other Vuetify elements such as v-select which also create their own parent elements.
I have made a v-autocomplete but it highlights words/chars in the list that the user haven't typed.
the v-autocomplete code:
<v-autocomplete
:filter="() => true"
item-text="states.text"
:items="states"
filled
rounded
v-model="model"
:search-input.sync="search">
<template
slot="item"
slot-scope="{ parent,item }"
>
<v-list-tile-content >
<v-list-tile-title v-html="`${parent.genFilteredText(item.text)}`">
</v-list-tile-title>
</v-list-tile-content>
</template>
</v-autocomplete>
You can se it all in the codepen: https://codepen.io/maikenmadsen92/pen/ZEEZjYM?editors=1010
Is it possible just to highlight the words the user have typed in the input?
There are some issue with the implementation of you v-autocomplete.
You filter is useless since it will alway return true with is why all words/chars is highlights.
And the main issue is you item-text since following the doc vuetify
item-text :
Set property of items's text value
With mean you item-text=text since the items is already set to states.
<v-autocomplete
item-text="text"
:items="states"
filled
rounded
v-model="model"
:search-input.sync="search">
<template
slot="item"
slot-scope="{ parent,item }"
>
<v-list-tile-content >
<v-list-tile-title v-html="`${parent.genFilteredText(item.text)}`">
</v-list-tile-title>
</v-list-tile-content>
</template>
</v-autocomplete>
i am able to use getMaskedCharacters to do the trick
I'm using the vue-multiselect library. How can I hide this triangle if the data is empty?
<multiselect v-model="user.majors" id="majorsSearch" label="name" track-by="id" placeholder="Search majors..." select-label="Select" :options="majorsBag" :multiple="true" :loading="isLoadingMajors" :internal-search="false" :clear-on-select="true" :close-on-select="true" #search-change="asyncFindMajors">
<template slot="tag" scope="props"></template>
</multiselect>
You can replace the default dropdown button by providing the caret slot; in your situation you can use an empty <span>, try something like this:
<multiselect v-model="user.majors">
<span slot="caret" v-if="!user.majors.length"></span>
</multiselect>