时间戳

首页 > 解决方案 > 从数据指向方法 | VueJS

vue.js - 从数据指向方法 | VueJS

问题描述

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

这是我的模板（相关部分）：

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

标签： vue.js

解决方案

问题是您正在为data. 您必须使用常规function语法：

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

或者，现代版本：

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

这将this表明您期望它指向的内容（而不是window）。

推荐阅读