时间戳

首页 > 解决方案 > Vue没有看到从单独组件传递的函数

vue.js - Vue没有看到从单独组件传递的函数

问题描述

在组件 AI 内部有一个像这样的 watch 对象：

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.jsvuejs2vuex

解决方案

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

close_button_function: () => hideSnackBar()

请试试

close_button_function: () => this.hideSnackBar()

推荐阅读