Vue.js 指向数据| VueJS中的方法

我想从data属性指向方法上的函数，但我无法找到正确的方法

这是我的模板，是相关的部分：

      <v-tooltip
        left
        v-for="(actionData, action) in actions"
        :key="action"
      >
        <v-btn
          fab
          small
          @click="actionData.func"
          slot="activator"
        >
          <v-icon>{{ action }}</v-icon>
        </v-btn>
        <span>{{ actionData.alt }}</span>
      </v-tooltip>

我在名为openDialog的方法下有一个函数，但每次我尝试从这个指针执行它时，我在数据下都会抛出以下错误：

TypeError:\u this.openDialog不是函数

这是完整数据属性：

data: () => ({
  rules: {},
  fab: false,
  descriptionHeaders: [],
  dialog: {
    target: false,
    title: '',
    fields: [],
    save: () => {},
  },
  ignoerdFields: ['ignore', 'monitor', 'target'],
  actions: {
    add: {
      func: () => openComponentStepper('demo'),
      alt: '....',
    },
    build: {
      func: () => this.openDialog('test'),
      alt: '....'
    },
    adjust: {
      func: () => {},
      alt: '....'
    },
    update: {
      func: () => this.openDialog('ttl'),
      alt: '....'
    },
  },
}),

---

问题是您正在对数据使用箭头函数。必须使用常规函数语法：

或者，现代版本：

data() {
  return { /*...*/ }
}

---

这将使这一点指向您希望它指向的内容，而不是窗口。

我假设您已经在方法中定义了openDialog。你能展示你的整个数据方法吗？我的第一个想法是，您共享的代码中的this没有指向vue实例。。。在定义数据方法时，我已经添加了datamable replication of Don't use a arrow函数。箭头函数将其绑定到父作用域，在本例中，父作用域不是Vue实例。真不敢相信。。。谢谢

data: function() {
  return { /*...*/ }
}

data() {
  return { /*...*/ }
}