Question

我用vueJS编写项目代码。我有一个包含以下代码的组件：

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')
    }
}

我在项目中观察到回调错误：

this.setCommit is not a function

我在回调中放了console.log (this)，它显示的是默认对象而不是VueComponent。

我做错了吗？

感谢您的帮助。

Answer 1

如果您了解特定代码的工作原理，那么更好的方法是更改语法并查看哪些有效，而不是试错。

如vue documentation中所述：

不要在实例属性上使用箭头函数（例如vm.$watch('a', newVal => this.myMethod())）。由于箭头函数绑定到父上下文，此将不是您期望的Vue实例，并且this.myMethod将是未定义的。

如果您不熟悉es6箭头函数here，则对箭头函数的此绑定有很好的解释。

一旦你明白了，那就不再试错了

希望我的答案对你有所帮助

方法不是观察者回调vuejs中的函数

1 个答案: