I'm facing an issue while trying to execute a method that changes the text content of the currentStatus variable when the Confirm Cancel button is clicked. The button is located in the child component within a dialog box, while the method is supposed to be in the parent component. To tackle this, I am attempting to pass this method as props to the child component. However, despite writing the code below, I keep encountering the error, "this.cancelOrderFunction is not a function," in the console. Although I understand that this error is minor, I am struggling to pinpoint its source. Below is the code I've utilized to try and resolve this issue:
changeStatus.vue (Parent Component)
<template>
<cancelOrder :cancelOrderFunction="cancelOrderFunction"></cancelOrder>
</template>
<script>
import cancelOrder from "../components/cancelOrder.vue"; /*importing child component*/
export default {
data: () => ({
currentStatus: "ACTIVE",
}),
methods: {
cancelOrderFunction() {
this.currentStatus = "CANCELLED";
},
},
components: {
cancelOrder,
},
};
</script>
cancelOrder.vue (Child Component)
<template>
<v-btn @click="confirmCancelOrder">Confirm Cancel</v-btn>
</template>
<script>
export default {
props: ["cancelOrderFunction"],
methods: {
confirmCancelOrder() {
this.cancelOrderFunction();
},
},
};
</script>
The cancelOrder.vue component contains a Cancel Order button that opens a dialog box. Within the dialog box, there is a Confirm Cancel button, which upon being clicked, should simultaneously close the dialog box and trigger the cancelOrderFunction. While the dialog box closes successfully, the method is not being invoked due to the error mentioned earlier.