Javascript 此全局方法。vue-i18n中的$t在函数中不起作用

我全局定义vue-I18n：

Vue.use(VueI18n);
export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'cs',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'cs',
  messages: loadLocaleMessages(),
});

我可以在任何地方使用它，包括：

this.$t('sign-up.something-went-wrong')

但不是在for-each循环中，可能是因为创建了新的匿名类。我如何从那里引用它

function convertErrors(jsonErrors) {
  const veeErrors = {};
  console.log(this.$t('sign-up.heading'));
  return veeErrors;
}

并从导出调用。默认值

methods: {
  async submitForm() {
    try {
      const { data } = await this.$store.dispatch('CREATE_USER_PROFILE', {
        email: this.email,
        password: this.password,
        nickname: this.nickname,
      });

      if (!this.personalData) {
        this.success = true;
        return true;
      }

      if (data.token === undefined) {
        this.error = this.$t('sign-up.something-went-wrong');
        return false;
      }

      const jwtData = jwtDecode(data.token);
      const vehicles = [];
      setVehicles.call(this, vehicles);
      await this.$store.dispatch('UPDATE_USER_PROFILE', {
        jwt: data,
        userId: jwtData.userId,
      });
      this.success = true;
    } catch (error) {
      this.success = false;
      if (error.response) {
        console.log(this.$t('sign-up.something-went-wrong')); // this works
        const veeErrors = convertErrors(error.response.data); // this fails
        this.$refs.form.setErrors(veeErrors);
      } else {
        this.error = this.$t('sign-up.something-went-wrong');
      }
    }
    return this.success;
  },
},

我可以在chrome控制台中看到以下错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler (Promise/async): "TypeError: Cannot read property '$t' of undefined"

及

---

您可以在每个循环之前存储VueComponent。像这个：

let self = this
// .......
jsonErrors.errors.forEach((error) => {
  if (error.field) {
    veeErrors.$field = [self.$t(error.messageKey)];
  } else {
    self.error = self.$t(error.messageKey);
  }
});

---

您可以在每个循环之前存储VueComponent。像这个：

let self = this
// .......
jsonErrors.errors.forEach((error) => {
  if (error.field) {
    veeErrors.$field = [self.$t(error.messageKey)];
  } else {
    self.error = self.$t(error.messageKey);
  }
});

---

convertErrors

没有“this”，它没有绑定到组件。将其移动到组件的

方法中

，以引用

此

：

方法：{
convertErrors（jsonErrors）{
const veeeerrors={}；
console.log（this.t（'sign-up.heading'））；
返回错误；
}
}

或

使用以设置

转换器错误

内的上下文（此）：

constVeeErrors=convertErrors.call（this，error.response.data）；

convertErrors没有“this”，它没有绑定到组件。将其移动到组件的

方法中

，以引用

此

：

方法：{
convertErrors（jsonErrors）{
const veeeerrors={}；
console.log（this.t（'sign-up.heading'））；
返回错误；
}
}

或

使用以设置

转换器错误

内的上下文（此）：

constVeeErrors=convertErrors.call（this，error.response.data）；

调用的

jsonErrors.errors.forEach

在哪里

arrow函数中的此

取决于该函数的声明位置。从form handler>async submitForm（）{您可以粘贴更多的代码吗？很难说问题出在哪里。此部分有效：此。$t（'sign-up.something Gorror'）；但该部分无效：此。$refs.form.setErrors（convertErrors（error.response.data））；Where is

jsonErrors.errors.forEach

被调用？

此

在arrow函数内取决于该函数的声明位置。从表单处理程序内>异步提交表单（）{您可以粘贴更多的代码吗？很难说问题在哪里。此部分工作：this.$t（'sign-up.something-error'））；但该部分没有：this.$refs.form.setErrors（convertErrors（error.response.data））；arrow函数确保

此

在函数内部与声明函数的位置相同。

让self=this

将提供与原始代码相同的引用。我想说的是，在

此

关键字在未来范围内更改其含义之前，我们可以存储VueComponent。与arrow函数没有区别在函数中，

此

始终与声明函数的

此

相同。您的代码以相同的效果结束。您是对的。我尝试在循环之前调用它，但它在那里也不起作用。我需要调查调用堆栈。箭头函数确保

此

在函数中是相同的函数作为声明函数的位置。

let self=this

将提供与原始代码相同的引用。我想说的是，在

this

关键字在未来范围内改变其含义之前，我们可以存储VueComponent。与箭头函数没有区别，

函数中的this

始终与e

这是函数声明的地方。你的代码最终也会产生同样的效果。你是对的。我试图在循环之前调用它，但它在那里也不起作用。我需要调查调用堆栈。当我在方法内部和提交表单之前移动函数时，WebStorm抱怨它在这里没有定义：const veererrors=convertErROR（error.response.data）；它将该方法显示为未使用。如果将其移动到
方法中
，则必须通过
this.convertErrors
调用它（添加
this.
）因为它将被移动到组件实例中。当我在方法内部和提交表单之前移动函数时，WebStorm抱怨它在这里未定义：const veererrors=convertErrors（error.response.data）；并将该方法显示为未使用。如果将其移动到
方法中
，则必须通过
this.convertErrors
（添加
this.
）调用它，因为它将被移动到组件实例。