如何在组件vue js的数据中引用来自同一组件的方法

Question

I have the following component

<template>
   <li v-for="(item, i) in this.menu" :key="i" @click="item.action()"> //trying 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>

As you can see in the commented sections, I have a menu in the data section, it has a title and action properties in it. So in the template, I want to invoke whatever function we have specified when someone clicks on that particular item.

So how do I refer a method in the same component in the data section of that component? as of now, I am getting start prepare is undefined error.

Let me know if any further clarifications are needed

Answer 1

Try to add the method name as a string like action value and in the template access it like @click="handleAction(item.action)" :

<template>
   <li v-for="(item, i) in menu" :key="i" @click="handleAction(item.action)">
      {{menu.title}}
   <li>
</template>
<script>
export default {
        data: () => ({
            menu: [
                {title: 'Start Preparing', action:'startPrepare'}, //how do I reference the method here?
                {title: 'Cancel Order'},
            ],
        }),

        methods: {
          handleAction(actionName){
          this[actionName]();
           }
            startPrepare: function (orderId) {
                console.log("start")
            }
        }

    }
</script>

Answer 2

The main problem here I think is that you're using an arrow function for your data , which can't be bound to the Vue instance. You need to use a normal function instead ..

 export default { data() { return { menu: [{ title: 'Start Preparing', action: this.startPrepare }, //how do I reference the method here? { title: 'Cancel Order' }, ], } }, methods: { startPrepare: function(orderId) { console.log("start") } } } 

 <template> <li v-for="(item, i) in this.menu" :key="i" @click="item.action()"> //trying to call the method in the component {{menu.title}} <li> </template>