Question

我将nuxt与vuetify结合使用，并在一个文件中定义了所有验证规则（用于文本输入），如下所示：

// @/plugins/form_validations.js

export default Object.freeze({
  VALIDATIONS: {

    FIRSTNAME: [
      v => !!v || 'Firstname is required',
      v => (v && v.length >= 3) || 'Firstname must be at least 3 characters'
    ],

    // ...
})

我在这样的组件中使用它们：

import FormValidations from '@/plugins/form_validations.js'

export default {
  data() {
   firstnameRules: FormValidations.VALIDATIONS.FIRSTNAME
  }
}

<v-text-field
   v-model="firstname"
   :rules="firstnameRules"
/>

我现在想根据语言环境翻译此规则的文本。

我已经在this example之后安装了i18n，并且可以在我的组件中很好地使用它，例如：

<v-text-field
   ref="firstname"
   v-model="firstname"
   :label="$t('firstname')"
   :rules="firstnameRules"
    required />

但是，我无法在我对所有规则进行分组的文件中直接使用翻译插件。我已经看到，使用nuxt，您可以按以下方式访问插件中的上下文：

export default ({ app, store }) => {
}

但是我无法使用Object.freeze以这种格式定义常量。

我也尝试过这个：


import i18n from '@/plugins/i18n.js'

export default Object.freeze({
  VALIDATIONS: {
    FIRSTNAME: [
      v => !!v || i18n.t('firstname_required'),
    ],
}

但是我收到未定义函数 t 的错误。如何在规则中访问翻译插件？

Answer 1

我面临几乎相同的问题，这是我的解决方案：

// @/plugins/validation-rules.js

export default ({app}) => {

  let i18n = app.i18n

  // You can use `this.$rules` anywhere in the Nuxt app.
  Vue.prototype.$rules = {
    required: [v => !!v || i18n.t('required')]
  }
}

<v-text-field
      v-model="email"
      :rules="this.$rules.required"
      label="E-mail"
      required
      ref="emailField"
></v-text-field>

当我在语言切换器中更改语言时，错误消息不会以您的切换语言显示，您必须在输入字段中重新输入错误的电子邮件，但是错误消息将以正确的语言显示。 / p>

我也不确定Vue.prototype，最好使用combined inject。

在Nuxt插件中使用i18n

1 个答案: