javascript - 我如何在组件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 使用箭头函数，它不能绑定(bind)到 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>