CODEWITHSUNDEEP
vue.jsvuejs2vuex
sb9
sb9

Reputation: 316

Vue not seeing function passed from separate component

Inside component A I have a watch object like this:

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
},

and a function like this:

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

close_button_function is correctly finding the hideSnackBar function I have inside component A and passing it along to my vuex module. Component B has a computed property that returns the same object stored in the store. 

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

However, when component B tries to use the function, it says "hideSnackBar is not defined". 

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

I checked and made sure the function is being sent along to my vuex store and assigned to the right object property there.

Is what I'm trying to do not possible?

Upvotes: 0

Views: 41

Answers (1)

Anatoly
Anatoly

Reputation: 22803

You call hideSnackBar as if it exists in showSnackBar context.

close_button_function: () => hideSnackBar()

Please, try

close_button_function: () => this.hideSnackBar()

Upvotes: 1

Related Questions