[Vuejs]-Can not use @johmun/vue-tags-input with VueJS and Laravel/Spark

by

0👍

✅

So I stumbled across the solution by trial & error.

First I had to register the component the right way in resources/js/bootstrap.js like so:

import VueTagsInput from './VueTagsInput.vue'
Vue.component('vue-tags-input', VueTagsInput);

But this caused another error because I called the component within the component registration itself. I used the name option in the single file component in order to overcome this error. I gave my newly created component a different name like this:

<template>
  <div>
    <johmun-vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
      :autocomplete-items="filteredItems"
    />
  </div>
</template>

<script>
import JohmunVueTagsInput from '@johmun/vue-tags-input';

export default {
  name: "VueTagsInput",
  components: {
    JohmunVueTagsInput,
  },
  data() {
    return {
      tag: '',
      tags: [],
      autocompleteItems: [{
        text: 'Spain',
      }, {
        text: 'France',
      }, {
        text: 'USA',
      }, {
        text: 'Germany',
      }, {
        text: 'China',
      }],
    };
  },
  computed: {
    filteredItems() {
      return this.autocompleteItems.filter(i => {
        return i.text.toLowerCase().indexOf(this.tag.toLowerCase()) !== -1;
      });
    },
  },
};
</script>

Leave a comment