CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-props
Danny Younes
Danny Younes

Reputation: 619

Invalid prop: custom validator check failed for prop "tags"

I am using a Vue.js component vue-tags-input. I want to edit the tags that are stored in the db in the following format 1,2,3,4,5,6.

I split the data by , and I push the values onto the tags array.

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: '',

The element is populated correctly in my form :

<vue-tags-input
  v-model="tag"
  :tags="tags"
  @tags-changed="updateTags"
/>

But I get the following error:

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>

How is the prop meant to be defined in this case?

Regards Danny.

Upvotes: 2

Views: 3273

Answers (3)

SUHAIL KC
SUHAIL KC

Reputation: 430

I have the same issue. I fixed it by adding "tiClasses":["ti-valid"]

in your case, this.tags.push({ "text": tags_split[item], "tiClasses": ["ti-valid"] });

found from here http://www.vue-tags-input.com/#/start

Upvotes: 0

skirtle
skirtle

Reputation: 29132

tags should be an array of objects, each with a text property.

Docs: http://www.vue-tags-input.com/#/api/props
Source: https://github.com/JohMun/vue-tags-input/blob/32b8f552eaf2eb477b2c97d69a0af5b7ddcb94fc/vue-tags-input/vue-tags-input.props.js#L6

It isn't immediately clear to me why you aren't getting a console warning of 'Missing property "text"'.

So this:

this.tags.push(tags_split[item]);

should be:

this.tags.push({ text: tags_split[item] });

Upvotes: 5

entio
entio

Reputation: 4273

You initialize vue instance with an empty tags array. In loop, you assign push to this.tags in the context of window. This means window. Remove the loop and change data declaration to:

data() {
    return {
         tags: tags_split
    } 
}

Then the vue instance will be able to access the value of tags.

Upvotes: 0

Related Questions