Vue

by Dmitri Ganenco

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>
<div id="tagApp">
  <multiselect
    label="tag_data"
    track-by="campaign_tag_id"
    v-model="value"
    :options="options"
    :multiple="true"
    :taggable="true"
    @tag="addTag"
    @search-change="val => read(val)"
    :preselect-first="false"
    :close-on-select="false" 
    :clear-on-select="true" 
    :preserve-search="true" 
    tag-placeholder="Add this as new tag" 
    placeholder="Search or add a tag"
  ></multiselect>
</div>

Vue

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  el: "#tagApp",
  data() {
    return{
        value: [],
        loading: false,
        options: []
    }

  },
  methods: {
    read: function(val){
      if (val) {
        this.loading = true;
        this.options = [];

      } 
    },
    addTag(newTag) {
		debugger;
      const tag = {
        tag_data: newTag,
      };
     
      this.options.push(tag);
      this.value.push(tag);

    }
  }
})