Below is the code for a specific component:
<template>
<li v-for="(item, i) in this.menu" :key="i" @click="item.action()"> //attempting to call the method in the component
{{menu.title}}
<li>
</template>
<script>
export default {
data: () => ({
menu: [
{title: 'Start Preparing', action: this.startPrepare}, //how do I reference the method here?
{title: 'Cancel Order'},
],
}),
methods: {
startPrepare: function (orderId) {
console.log("start")
}
}
}
</script>
The menu section in the data part includes both title and action properties. The goal is to trigger the specified function when an item is clicked within the template.
The challenge lies in referencing a method from the same component in the data section. Currently, there's an error indicating that startPrepare is undefined.
Please let me know if you need further clarification.