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
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
