Недопустимый объект: не удалось выполнить пользовательскую проверку валидатора для тегов объекта

Я использую компонент 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>

Как опора должна быть определена в этом случае?

С уважением, Дэнни.

Источник

2 ответа

Решение

tags должен быть массив объектов, каждый с text свойство.

Документы: http://www.vue-tags-input.com/
Источник: 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"] });

найдено здесь http://www.vue-tags-input.com/

Источник

Вы инициализируете экземпляр vue пустым массивом тегов. В цикле вы назначаете push для this.tags в контексте окна. Это означает окно. Удалите цикл и измените объявление данных на:

data() {
    return {
         tags: tags_split
    } 
}

Тогда экземпляр vue сможет получить доступ к значению тегов.

Источник
Другие вопросы по тегам