不能在 VueJS 和 Laravel/Spark 中使用 @johmun/vue-tags-input

Question

我目前使用 VueJS/Laravel/Spark 设置了一个新的 playground，并希望实现标签输入组件。

我不明白如何正确注册这些组件。我正在按照操作指南和官方文档进行操作，但实施效果一般。

我想从@johmun -> http://www.vue-tags-input.com 实现我通过 npm (npm install @johmun/vue-tags-input) 安装的库。

我创建了一个名为 VueTagsInput.vue 的单个文件组件，如下所示：

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

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

export default {
  components: {
    VueTagsInput,
  },
  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>

我在 resources/js/bootstrap.js 导入了这个单个文件组件，如下所示：

import VueTagsInput from './VueTagsInput.vue'

我在 home.blade.php 视图中使用这个组件是这样的：

<vue-tags-input v-model="tag" 
                autocomplete-always-open 
                add-from-paste 
                allow-edit-tags>
</vue-tags-input>

这呈现了一个输入，我可以根据需要与之交互，但我不能对上面输入的国家使用自动完成功能，并且控制台还会抛出以下错误：

[Vue warn]: Property or method "tag" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

我不知道我做错了什么。

Answer 1

所以我通过反复试验偶然发现了解决方案。

首先，我必须在 resources/js/bootstrap.js 中以正确的方式注册组件，如下所示：

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

但这导致了另一个错误，因为我在组件注册本身中调用了组件。为了克服这个错误，我在单文件组件中使用了名称选项。我给新创建的组件取了一个不同的名称，如下所示：

<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>

不能在 VueJS 和 Laravel/Spark 中使用 @johmun/vue-tags-input

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

javascript

laravel

vue.js

vuejs2

laravel-spark