CODEWITHSUNDEEP
vue.jswatch
BT101
BT101

Reputation: 3826

Watch vue-tags-input change

I have vue-tags-input component in my app:

<vue-tags-input
    placeholder="np. x:10,y:10"
    v-model="tag"
    :tags="tags"
    :validation="validation"
    @tags-changed="allTags => tagsChanged(allTags)"
/>

I followed docs and on tags-changed I'm executing my own function which map array of objects:

tagsChanged(tags) {
    this.mapsData.waypoints = tags.map(obj => { return obj.text });
    console.log(this.mapsData.waypoints);
}

although in console I can see this.mapsData.waypoints contain correct value I'm not able to watch for this change in watch hook:

watch: {
    'mapsData': {
        handler: function (val) {
            console.log(val); //never console
        },
        deep: true
    }
},

this console.log never actually console anything. Why? I need this watch to send custom event to other place in my app with this value. I can just send from tagsChanged method but my mapsData contain also other values and I want to send everything from watcher.

Upvotes: 0

Views: 814

Answers (1)

BT101
BT101

Reputation: 3826

Vue for some reason can't detect this change so I need to trigger it myself by:

Vue.set(object, propertyName, value)

Upvotes: 1

Related Questions