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

Question

我有以下组件

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

正如您在评论部分看到的，我在数据部分有一个menu，它有一个title 和action 属性。因此，在模板中，当有人单击该特定项目时，我想调用我们指定的任何函数。

那么我如何在该组件的数据部分中引用同一组件中的方法？截至目前，我开始准备是undefined 错误。

如果需要进一步说明，请告诉我

Answer 1

我认为这里的主要问题是您正在为您的data 使用箭头函数，它不能绑定到 Vue 实例。您需要改用普通功能..

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>

Answer 2

尝试将方法名称添加为类似操作值的字符串，并在模板中访问它，如@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>