Vue没有看到从单独组件传递的函数答案

【问题标题】：Vue not seeing function passed from separate componentVue没有看到从单独组件传递的函数
【发布时间】：2019-12-27 18:27:56
【问题描述】：

在组件 A 中，我有一个像这样的手表对象：

watch: {
delete_todo_object: {
    handler(object) {
        if (object.error) {
            this.showSnackBar({
                text: `Could\'nt delete task. Reason: ${object.error}`,
                color: "error",
                close_button_text: "Close",
                close_button_function: () => hideSnackBar()
            });
        }
  },
  deep: true
},

还有这样的函数：

methods: {
hideSnackBar() {
    this.$store.commit("notifications/hideSnackBar");
},

close_button_function 正确地找到了我在组件 A 中的 hideSnackBar 函数并将其传递给我的 vuex 模块。组件 B 有一个计算属性，它返回存储在存储中的相同对象。

computed: {
    snackbar_object () {
        return this.$store.state.notifications.snackbar;
    }
},

但是，当组件 B 尝试使用该函数时，它会显示“hideSnackBar 未定义”。

<v-btn
    color="primary"
    flat
    @click="snackbar_object.close_button_function"
  >

我检查并确保该函数被发送到我的 vuex 存储并分配给那里的正确对象属性。

我试图做的事情不可能吗？

【问题讨论】：

标签： vue.js vuejs2 vuex

【解决方案1】：

您调用 hideSnackBar 就好像它存在于 showSnackBar 上下文中一样。

close_button_function: () => hideSnackBar()

请尝试

close_button_function: () => this.hideSnackBar()

【讨论】：