道具无效：道具 "tags" 的自定义验证程序检查失败

Question

我正在使用 Vue.js 组件 vue-tags-input。我想按以下格式编辑存储在数据库中的标签 1,2,3,4,5,6.

我按 , 拆分数据，然后将值推送到标签数组。

var tags_split = this.resources[index]['tags'].split(',')
for (var item in tags_split){
  this.tags.push(tags_split[item]);
}

var app = new Vue({
  el: '#app',
  data: {
    tags: [],
    tag: '',

我的表单中的元素已正确填充：

<vue-tags-input
  v-model="tag"
  :tags="tags"
  @tags-changed="updateTags"
/>

但我收到以下错误：

vue.js:634 [Vue warn]: Invalid prop: custom validator check failed for prop "tags". found in

---> <VueTagsInput> at vue-tags-input/vue-tags-input.vue
       <Root>

在这种情况下，道具是如何定义的？

问候丹尼。

Answer 1

您使用空标签数组初始化 vue 实例。在循环中，您在 window 的上下文中将 push 分配给 this.tags。这意味着 window。删除循环并将数据声明更改为：

data() {
    return {
         tags: tags_split
    } 
}

然后vue实例就可以访问标签的值了。

Answer 2

tags 应该是一个对象数组，每个对象都有一个 text 属性.

文档：http://www.vue-tags-input.com/#/api/props
资料来源：https://github.com/JohMun/vue-tags-input/blob/32b8f552eaf2eb477b2c97d69a0af5b7ddcb94fc/vue-tags-input/vue-tags-input.props.js#L6

我不是很清楚为什么你没有收到 'Missing property "text"' 的控制台警告。

所以这个：

this.tags.push(tags_split[item]);

应该是：

this.tags.push({ text: tags_split[item] });

Answer 3

我也有同样的问题。我通过添加 "tiClasses":["ti-valid"]

修复了它

在你的情况下，this.tags.push({ "text": tags_split[item], "tiClasses": ["ti-valid"] });

从这里找到 http://www.vue-tags-input.com/#/start

道具无效：道具 "tags" 的自定义验证程序检查失败

Invalid prop: custom validator check failed for prop "tags"

javascript

vue.js

vuejs2

vue-props