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>
Related
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>
Is it possible to allow same option selection using Vue Select library? Let's say I have 2 options Canada and United States, then wanted to select that option many times. That would be like:
<v-select multiple v-model="selected" :options="['Canada','United States']" />
Also tried Vue-multiselect library, but it seems that the custom selection template is not working for Vue 3 with version ^3.0.0-alpha.2. This is the repository for Vue 3 compatability. Meanwhile, the code below is for version 2:
<multiselect v-model="value" :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" placeholder="Pick some" label="name" track-by="name" :preselect-first="true">
<template slot="selection" slot-scope="{ values, search, isOpen }">
<span class="multiselect__single" v-if="values.length && !isOpen">{{ values.length }} options selected</span>
</template>
</multiselect>
How to achieve this behavior?
Im using the vue-multiselect.js (https://vue-multiselect.js.org/).
Atm I need to translate all text to german. Atm Im doing it with customs inside the multiselect
<multiselect id="account-selected" #input="selectParent" v-model="account.parent_account" placeholder="Tippen um Suche zu starten" :multiple="false" ... :options="optionsParents">
<span slot="noResult">Suche ergab keine Treffer</span>
<span slot="noOptions">Keine Optionen</span>
</multiselect>
Its working fine, but Im using these multiselects frequently. So its a pain to maintain it. I need to change it at every multiselect in every component. Is there a way to define these "noResult", "noOptions", "placeholder" etc globally? So its the same for every multiselect in every component?
You can make your own Multiselect component based on vue-multiselect
Here is the demonstration I make in codesandbox for your reference:
https://codesandbox.io/s/dazzling-yonath-pjsxt?file=/src/components/CustomMultiSelect.vue
The idea is to make a vue component which only have vue-multiselect and set all fixed settings there, like placeholder, slot. For all dynamic value, it can be retrieved by value/event ($attrs, $listeners) pass though provided by vue.
CustomMutliSelect.vue
<template>
<multiselect
v-bind="$attrs"
v-on="$listeners"
placeholder="Tippen um Suche zu
starten"
>
<span slot="noResult">Suche ergab keine Treffer</span>
<span slot="noOptions">Keine Optionen</span>
<!-- Below template for Testing -->
<template slot="singleLabel" slot-scope="{ option }"
><strong>{{ option }}</strong> is written in<strong>
{{ option }}</strong
></template
>
</multiselect>
</template>
App.vue
<CustomMultiSelect
id="account-selected"
v-model="value"
:multiple="false"
:options="options"
/>
With CustomMultSelect, you can apply it everywhere without duplicating placeholder and slots.
I am trying to add a router link for each element in this autocomplete component, but the links are not being added. How do I make the items in the list clickable corresponding to a URL with their id ?
I want the value of item-value to be a router link as below:
<router-link :to="'employee/'+ item.ID">{{item.ID}}</router-link>
here is the autocompelete
<v-autocomplete
:items="employees"
item-text="ID"
item-value="ID"
data-vv-name="search"
append-icon="mdi-magnify"
placeholder="Search for an employee"
outlined
id="search"
>
</v-autocomplete>
is changing the value the right approach to do this?
You can add the slot item to modify the item in the list.
Try this:
<v-select
:items="employees"
item-text="ID"
item-value="ID"
data-vv-name="search"
append-icon="mdi-magnify"
placeholder="Search for an employee"
outlined
id="search"
>
<template v-slot:item={item}>
<router-link :to="'employee/'+ item.ID">{{item.Name}}</router-link>
</template>
</v-select>
I am using a plugin called Vue-Multiselect and have it working pretty good on my app. However, there is a functionality in the plugin that I do no want. How can I safely remove it?
Let me explain: CodeSandBox Collaboration Editor .
Note: To see this flow in action, choose EDIT next to ACME Widget and then search for an on existent user in the multiselect input box.
When a user is searched for in the multiselect input box, and if a match is found, the match pops up for the user to select. That is good. However, when a user is NOT found, there's a placeholder text that says the following: Press enter to create a tag . I do NOT want to give my users the ability to create new tags/options if the option does not exist. How can I remove that functionality from this component?
Here is my multi-select component code:
<multiselect
id="customer_last_name_input"
v-model="values"
:options="options"
label="lastname"
placeholder="Select or search for an existing customer"
track-by="uid"
:loading="isLoading"
:custom-label="customerSelectName"
aria-describedby="searchHelpBlock"
selectLabel
:multiple="true"
:taggable="true"
>
<template
slot="singleLabel"
slot-scope="props"
>{{ props.option.lastname }}, {{props.option.firstname}}</template>
<template slot="option" slot-scope="props">
<strong>{{ props.option.lastname }}</strong>
, {{ props.option.firstname }} —
<small>{{ props.option.email }}</small>
</template>
<!-- <template slot="noResult">Looks like this customer doesn't exist yet.<button class="btn btn-primary" type="button" #click="addCustomer">Add Customer</button></template> -->
</multiselect>
I found the answer. I simply remove the taggle=true prop from the multiselect component.