I'm coding a project with vueJS. I've a component with following code :

import ProjectsStore from './../stores/ProjectsStore.js';

export default {
    store: ProjectsStore,
    data () {
        return {
            loading: false,
            randomProject: null,
        }
    },
    computed: {
        projects () {
            return this.$store.state.projects;
        },
        commits () {
            return this.$store.statemits;
        }
    },
    methods : {
        setCommit : ()=> {
            // code here
        }
    },
    watch: {
        projects: (value) => {
            this.setCommit()
        }
    },
    mounted () {
        this.$store.dispatch('loadProjectsList')
    }
}

I've following error in projects watch callback :

this.setCommit is not a function

I put a console.log (this) in callback and it displays an default object not a VueComponent.

Did I make something wrong ?

Thanks for your help.

I'm coding a project with vueJS. I've a component with following code :

import ProjectsStore from './../stores/ProjectsStore.js';

export default {
    store: ProjectsStore,
    data () {
        return {
            loading: false,
            randomProject: null,
        }
    },
    computed: {
        projects () {
            return this.$store.state.projects;
        },
        commits () {
            return this.$store.state.commits;
        }
    },
    methods : {
        setCommit : ()=> {
            // code here
        }
    },
    watch: {
        projects: (value) => {
            this.setCommit()
        }
    },
    mounted () {
        this.$store.dispatch('loadProjectsList')
    }
}

I've following error in projects watch callback :

this.setCommit is not a function

I put a console.log (this) in callback and it displays an default object not a VueComponent.

Did I make something wrong ?

Thanks for your help.

• javascript
• vue.js

• 2 Not 100% on this but try changing your function definition from setCommit: () => {} to setCommit() {}. Maybe the same for the projects method, too. – ZeroBased_IX Commented May 14, 2017 at 15:37
• It's exactly that. Thanks you very much ! I'm a newbie in ES6, I didn't know the difference. – amiceli Commented May 14, 2017 at 15:54
• 1 No problem, I'm a newbie too. That's just the way I've always done it. Glad I could help. – ZeroBased_IX Commented May 14, 2017 at 15:56

1 Answer 1

Instead of trial and error of changing the syntax and to see what works, its better if you understand why a particular piece of code works.

As mentioned in the vue documentation:

Don’t use arrow functions on an instance property (e.g. vm.$watch('a', newVal => this.myMethod())). As arrow functions are bound to the parent context, this will not be the Vue instance as you’d expect and this.myMethod will be undefined.

If you are new to es6 arrow functions here is a pretty good explantion of arrow function's this binding works.

Once you clearly understand then no more trial and error

Hope my answer was of some help to you