I am building a Vue 2 Webpack application that uses Vuex. I am trying to update a ponent's local state by watching a puted property which is getting data from the Vuex store. This is what the inside of the <script></script> section of my ponent looks like:

export default {
    name: 'MyComponent',

    data() {
        return {
            // UI
            modal: {
            classes: {
                'modal__show-modal': false,
            },
            tags: [],
            },
        };
    },

    puted: {
        tagList() {
            return this.$store.getters.tagList;
        },
    },

    watch: {
        tagList: (updatedList) => {
            this.modal.tags = updatedList;
        },
    },
};

As you can see, I have a puted property called tagList which fetches data from the store. I have a watcher that watches tagList so that whenever the store's data changes, I can update modal.tags to the new value.

As per Vue documentation, I can call this.propertyName and update my local ponent state but when I call this.modal.tags = updatedList;, I get the following error:

[Vue warn]: Error in callback for watcher "tagList": "TypeError: Cannot set property 'tags' of undefined"

Why does this error occur even though it looks no different than what is in Vue.js's documentation?

I am building a Vue 2 Webpack application that uses Vuex. I am trying to update a ponent's local state by watching a puted property which is getting data from the Vuex store. This is what the inside of the <script></script> section of my ponent looks like:

export default {
    name: 'MyComponent',

    data() {
        return {
            // UI
            modal: {
            classes: {
                'modal__show-modal': false,
            },
            tags: [],
            },
        };
    },

    puted: {
        tagList() {
            return this.$store.getters.tagList;
        },
    },

    watch: {
        tagList: (updatedList) => {
            this.modal.tags = updatedList;
        },
    },
};

As you can see, I have a puted property called tagList which fetches data from the store. I have a watcher that watches tagList so that whenever the store's data changes, I can update modal.tags to the new value.

As per Vue documentation, I can call this.propertyName and update my local ponent state but when I call this.modal.tags = updatedList;, I get the following error:

[Vue warn]: Error in callback for watcher "tagList": "TypeError: Cannot set property 'tags' of undefined"

Why does this error occur even though it looks no different than what is in Vue.js's documentation?

• javascript
• vue.js
• vuejs2

2 Answers 2

Don't use arrow functions.

Change from:

watch: {
    tagList: (updatedList) => {
        this.modal.tags = updatedList;
    },
},

To:

watch: {
    tagList(updatedList) {              // changed this line
        this.modal.tags = updatedList;
    },
},

Vue docs mention this a few times:

Don't use arrow functions on an options property or callback, such as created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()). Since arrow functions are bound to the parent context, this will not be the Vue instance as you'd expect, often resulting in errors such as

Uncaught TypeError: Cannot read property of undefined

or

Uncaught TypeError: this.myMethod is not a function

It is basically a context/scope issue. When using arrow functions, the this does not refer to the Vue instance, but the enclosing context of where the ponent was declared (probably window).

That is because of the scope issue. You are calling this. from another context. So, within arrow functions, you don't have access to vuejs data.

I suggest you change the watch to:

tagList (updatedList) {
    this.modal.tags = updatedList;
},