Vue没有看到功能从单独的组件传递

时间:2019-12-27 18:27:56

标签: vue.js vuejs2 vuex

内部组件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存储并在那里分配了正确的object属性。

我想做的是不可能的吗?

1 个答案:

答案 0 :(得分:1)

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

close_button_function: () => hideSnackBar()

请尝试

close_button_function: () => this.hideSnackBar()