道具无效:道具 "tags" 的自定义验证程序检查失败
Invalid prop: custom validator check failed for prop "tags"
我正在使用 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>
在这种情况下,道具是如何定义的?
问候丹尼。
您使用空标签数组初始化 vue 实例。在循环中,您在 window 的上下文中将 push 分配给 this.tags。这意味着 window。删除循环并将数据声明更改为:
data() {
return {
tags: tags_split
}
}
然后vue实例就可以访问标签的值了。
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] });
我也有同样的问题。我通过添加 "tiClasses":["ti-valid"]
修复了它
在你的情况下,this.tags.push({ "text": tags_split[item], "tiClasses": ["ti-valid"] });
我正在使用 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>
在这种情况下,道具是如何定义的?
问候丹尼。
您使用空标签数组初始化 vue 实例。在循环中,您在 window 的上下文中将 push 分配给 this.tags。这意味着 window。删除循环并将数据声明更改为:
data() {
return {
tags: tags_split
}
}
然后vue实例就可以访问标签的值了。
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] });
我也有同样的问题。我通过添加 "tiClasses":["ti-valid"]
在你的情况下,this.tags.push({ "text": tags_split[item], "tiClasses": ["ti-valid"] });