Install the NPM
if you are not installed in your project directory.
npm install vue-multiselect --save
Multi-select Tagging:-
You can set the :taggable prop to true to add tagging functionality in a single or multiple
selects and selecting this temporary option will emit the @tag event with the current typed search query as the first param.
Optional
configuration flags:-
1. tag-placeholder="Add this
as new tag", it is a tag suggestion message
2. tag-position="bottom",
it is tag position and it will be set to 'top' or 'bottom' and
the default tag position is top.
An example is details -
user-json
object:-
[
{ "name":
"Anil Singh", "code":
"Ak" },
{ "name":
"Reena Singh", "code":
"RS" },
{ "name":
"Aradhya Singh", "code":
"AS" }
]
JavaScript
Code Sample: -
import
Multiselect from 'vue-multiselect'
export default
{
components: {
Multiselect
},
data() {
return
{
value: [
{ "name":
"Anil Singh", "code":
"Ak" },
],
options: [
{ "name":
"Anil Singh", "code":
"Ak" },
{ "name":
"Reena Singh", "code":
"RS" },
{ "name":
"Aradhya Singh", "code":
"AS" }
]
}
},
methods: {
addTag(newTag) {
const
tag = { name: newTag, code: newTag.substring(0, 2) + Math.floor((Math.random()
* 10000000)) }
this.options.push(tag)
this.value.push(tag)
}
}
}
HTML
Code Sample: -
<div class="multiselectTags">
<label class="typo__label">Vue
2 and 3 Multiselect filter and Tagging</label>
<multiselect v-model="value"
tag-placeholder="Add
this as new tag"
placeholder="Search
or add a tag"
label="name"
track-by="code"
:options="options"
:multiple="true"
:taggable="true"
@tag="addTag"></multiselect>
<pre class="user-json"><code>{{ value }}</code></pre>
</div>
Reference Links -
- Vue 2 & 3 Multiselect with Search
- Vue2 & 3 Datatables Component | Pagination, Sorting, and filtering