Vue中使用定义的函数时,无法访问到data()里面的数据

zhuyua

于 2024-01-31 17:04:22 发布

阅读量752

点赞数 14

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zhuyuyaya/article/details/135957689

版权

const translateItems1 = () => {
      this.translatedItems = this.items1.map(item => {
      return {
        ...item,
        label: this.$t(item.labelKey)
      };
    });

items1是我们data()里面的数据，无法访问到

解决办法

把箭头函数替换为普通函数

const translateItems1 = function() {
      this.translatedItems = this.items1.map(item => {
      return {
        ...item,
        label: this.$t(item.labelKey)
      };
    });

在 translateItems1 函数中，使用了箭头函数 item => ({ ...item, label: this.$t(item.labelKey) })，但是将 translateItems1 定义为普通函数，所以箭头函数内部的 this 不会指向组件实例，而是指向了函数本身。因此，在该箭头函数中，this.$t 和 this.items1 可能无法正确识别。