Vuejs Input multiple Tags with dynamic autocomplete using Tag Manager

June 30, 2018 by admin

Table of Contents

Toggle

Vuejs Input multiple Tags with dynamic autocomplete using Tag Manager

In this Post We Will Explain About is Vuejs Input multiple Tags with dynamic autocomplete using Tag Manager With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vuejs – Input multiple tags with dynamic autocomplete example

In this post we will show you Best way to implement Bootstrap – Input multiple tags example using Tag Manager Vuejs, hear for How to Dynamic Autocomplete Tag Input Plugin For Vuejs with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

READ :  Vuejs DataTable Searching Sorting Pagination PHP with MySQL

Include External libs

First of all the include all the Tag-manager using all the external libs add and css with js included.

[php]
selectize.bootstrap3.min.css
bootstrap.min.css
bootstrap.min.js
selectize.js
vue.js
[/php]

index.html

and then second one created one or more div and give the uniq id and call the vuejs int method and one or more function call to this tag input select box.

[php]

Selected: {{ choosed_cat }}

basic: Select a Languages...Thomas EdisonPHPPHP jQueryAngularjs Vuejs

Selected: {{ choosed_cat }}

basic: Select a Languages...Laravel InstallPHPPHP jQueryAngularjs Vuejs

gfdgf
[/php]

index.js

[php]
Vue.component(‘selectize’, {
props: [‘options’, ‘value’],
template: ‘‘,
mounted: function () {
var vm = this;
var opt = $.extend({},$(this.$parm).data());
if (this.options != null)
opt.options = this.options;
this.sel = $(this.$parm).selectize(opt)
.on(“change”,function(){
vm.$emit(‘input’, vm.sel.getValue());
})[0].selectize;
this.sel.setValue(this.value,true);
},
watch: {
value: function (value) {
this.sel.setValue(value,true);
},
options: function (options) {
var val = this.sel.getValue();
this.sel.clearOptions();
this.sel.tag_add(options);
this.sel.refreshOptions(false);
this.sel.setValue(val);
}
},
destroyed: function () {
this.sel.destroy();
}
})

var vm = new Vue({
parm: ‘#parm’,
template: ‘#live-template’,
methods:{
tag_add:function(){
this.options.push({id:this.live-pro,text:”opt ” + this.live-pro});
this.live-pro++;
},
live_text_change : function(){
this.choosed_cat=[4];
}
},
data: {
choosed_cat: [3],
live-pro: 8,
maxOptionText : “program”,
options: [
{ “id”: 1, “text”: “Angularjs” }, { “id”: 2, “text”: “Vuejs” }, { “id”: 3, “text”: “Codignter” }, { “id”: 4, “text”: “Yii” }, { “id”: 5, “text”: “Mysqli” }, { “id”: 6, “text”: “Mysql” }, { “id”: 7, “text”: “Magento” }, { “id”: 8, “text”: “Asp.net” }
]
}
})

[/php]

Example

I hope you have Got Vuejs Input multiple Tags with dynamic autocomplete using Tag Manager And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.