无效的道具：道具“标签”的自定义验证器检查失败答案

【问题标题】：Invalid prop: custom validator check failed for prop "tags"无效的道具：道具“标签”的自定义验证器检查失败
【发布时间】：2019-08-17 21:35:48
【问题描述】：

我正在使用 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>

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

问候丹尼。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-props

【解决方案1】：

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] });

【讨论】：

【解决方案2】：

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

data() {
    return {
         tags: tags_split
    } 
}

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

【讨论】：

抱歉，您的回答让我有些困惑。将 tags_split 分配给标签我得到一个未定义的错误
@DannyYounes 问题中的代码示例显示 tags_split 是在您创建 Vue 实例之前立即定义的。我的猜测是这个问题具有误导性，第一段代码实际上是在 Vue 实例的方法中。

【解决方案3】：

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

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

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

【讨论】：