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实例。在循环中，您在窗口的上下文中将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

找到

道具无效：道具“标签”的自定义验证程序检查失败

3 个答案: