Vue2中data引用methods方法报错的解决方案咨询

问题原因 #

原代码存在两个核心问题：

1. data 使用箭头函数定义，导致 this 不指向组件实例，无法访问 methods 中的方法；
2. 即便改用普通函数定义 data，由于 data 初始化时机早于 methods 挂载，直接在 data 里引用 this.xxx 会拿到 undefined。

解决方案 #

方案一：改用普通函数定义data，在created钩子中初始化items

组件进入created阶段时，methods已完成挂载，此时可以安全引用方法：

<template>
  <v-list v-model="itemSelected">
    <v-list-item v-for="(item, i) in items" :key="i" @click="item.onClick">
      {{ item.label }}
    </v-list-item>
  </v-list>
</template>
<script>
export default {
  name: 'myTestComponent',
  data() { // 改用普通函数，保证this指向组件实例
    return {
      itemSelected: null, // 初始化变量
      items: [] // 先空初始化
    }
  },
  created() {
    // 在created中赋值，此时methods已挂载完成
    this.items = [
      { label: 'Logout', onClick: this.onLogoutClick },
      { label: 'Settings', onClick: this.onSettingsClick },
      { label: 'Profile', onClick: this.onProfileClick },
    ]
  },
  methods: {
    onLogoutClick() {
      console.log('LogoutClick')
    },
    onSettingsClick() {
      console.log('SettingsClick')
    },
    onProfileClick() {
      console.log('ProfileClick')
    },
  },
}
</script>

方案二：存储方法名字符串，点击时动态调用

在items中存储方法名称字符串，模板点击时通过this[方法名]()动态执行：

<template>
  <v-list v-model="itemSelected">
    <v-list-item v-for="(item, i) in items" :key="i" @click="this[item.onClick]()">
      {{ item.label }}
    </v-list-item>
  </v-list>
</template>
<script>
export default {
  name: 'myTestComponent',
  data() {
    return {
      itemSelected: null,
      items: [
        { label: 'Logout', onClick: 'onLogoutClick' },
        { label: 'Settings', onClick: 'onSettingsClick' },
        { label: 'Profile', onClick: 'onProfileClick' },
      ]
    }
  },
  methods: {
    onLogoutClick() {
      console.log('LogoutClick')
    },
    onSettingsClick() {
      console.log('SettingsClick')
    },
    onProfileClick() {
      console.log('ProfileClick')
    },
  },
}
</script>

方案三：直接在模板中绑定对应方法（最简洁）

如果每个列表项的点击逻辑固定，无需在items中存储方法引用，直接在模板的@click中指定对应方法：

<template>
  <v-list v-model="itemSelected">
    <v-list-item :key="0" @click="onLogoutClick">Logout</v-list-item>
    <v-list-item :key="1" @click="onSettingsClick">Settings</v-list-item>
    <v-list-item :key="2" @click="onProfileClick">Profile</v-list-item>
  </v-list>
</template>
<script>
export default {
  name: 'myTestComponent',
  data() {
    return {
      itemSelected: null
    }
  },
  methods: {
    onLogoutClick() {
      console.log('LogoutClick')
    },
    onSettingsClick() {
      console.log('SettingsClick')
    },
    onProfileClick() {
      console.log('ProfileClick')
    },
  },
}
</script>

额外修正点 #

原代码还有几处语法错误需修正：

• data 选项后缺少逗号；
• itemSelected 未初始化；
• v-list-item 中的 item.label 未用双大括号 {{ }} 插值。

内容的提问来源于stack exchange，提问作者Jamie Marshall