Question

我想从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>

这是我的数据：

  actions: {
    add: {
      func: () => openComponentStepper('demo'),
      alt: '....',
    },
    build: {
      func: () => this.openDialog('test'),
      alt: '....'
    },
    adjust: {
      func: () => {},
      alt: '....'
    },
    update: {
      func: () => this.openDialog('ttl'),
      alt: '....'
    },
  },

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

TypeError: _this.openDialog is not a function

这是完整的数据属性：

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: '....'
    },
  },
}),

Answer 1

问题是你正在为data使用箭头功能。您必须使用常规function语法：

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

或者，现代版本：

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

这会使this指向您期望它指向的内容（而不是window）。

从数据指向方法VueJS

1 个答案: