vue-multiselect

by Kiran G

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.28/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.multiselect/1.1.4/vue-multiselect.min.js"></script>
<div id="app">

  <multiselect :multiple="true" :hide-selected="true" :selected="selected" :options="options" :taggable="true" @tag="addTag" @update="updateSelected">
  
  </multiselect>

  
</div>

CSS

.multiselect {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  
  .form-group {
    margin-bottom: 0;
  }

JavaScript

new Vue({
  el: '#app',
  components: {
    multiselect: VueMultiselect.Multiselect
  },
  
  data: {
       options: ['kiran', 'ranjith', 'Vinod']
  },
  
  methods: {
    updateSelected: function (newSelected) {
      this.selected = newSelected
    },
    addTag: function(newTag) {
    	this.options.push(newTag);
    	this.selected.push(newTag);
    }
  }
});