不能将 @johmun/vue-tags-input 与 VueJS 和 Laravel/Spark 一起使用答案

【问题标题】：Can not use @johmun/vue-tags-input with VueJS and Laravel/Spark不能将 @johmun/vue-tags-input 与 VueJS 和 Laravel/Spark 一起使用
【发布时间】：2020-10-23 03:11:03
【问题描述】：

我目前用 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.

我不知道我做错了什么。

【问题讨论】：

在您的home.blade.php 中使用<vue-tags-input /> 并将autocomplete-always-open add-from-paste allow-edit-tags 添加到组件内的“原始”vue-tags-input 中
谢谢，还是不行：/

标签： javascript laravel vue.js vuejs2 laravel-spark

【解决方案1】：

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

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

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

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

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

【讨论】：