[Vuejs]-Vue.js- I am getting "this.cancelOrderFunction is not a function" error while calling method inside a child component

by

1👍

✅

Variables can only be passed to children. If you want to call a function from a child that is in a parent you should use "emit".

https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events

It’s also a good idea to bind this as a v-model. Because it binds both value and emitted values into one. It all depends on the case.

Below is the solution how you should do it using emit. Let me know if that’s exactly what you meant.

changeStatus.vue (Parent Component)

<template>        
        <cancelOrder @cancel-order-function="cancelOrderFunction"></cancelOrder>
</template>
<script>
...
methods: {
    cancelOrderFunction(data) {
    //do whatever you want with data
    }
}
...
</script>

cancelOrder.vue (Child Component)

<template>
    <v-btn @click="confirmCancelOrder">Confirm Cancel</v-btn>
</template>

<script>
export default {
  emits: ["cancel-order-function"],
  methods: {
    cancelOrderFunction() {
      this.$emit('cancel-order-function', data)
    },
  },
};
</script>
👤Mariusz

Leave a comment