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

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

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 2

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

data() {
    return {
         tags: tags_split
    } 
}

然后 vue 实例将能够访问标签的值。

Answer 3

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

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

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