javascript - 如何使用 vee-validate 和 vue-i18n 翻译字段名称

Question

我认为，有关 i18n 与 vee-validate 集成的文档不完整。如果我将 i18n 与 vee-validate 一起使用，我仍然不知道如何翻译字段名称。

这是我的 main.js:

import ruValidation from 'vee-validate/dist/locale/ru'
import enValidation from 'vee-validate/dist/locale/en'

Vue.use(VeeValidate, {
  i18nRootKey: 'validations',
  i18n,
  dictionary: {
    en: enValidation,
    ru: ruValidation
  },
  errorBagName: 'vErrors',
  events: ''
})

但问题是 - 我如何翻译属性？我试过:

import attributesRU from './locales/veevalidate/ru/attributes'

  dictionary: {
    en: enValidation,
    ru: { message: ruValidation, attributes: attributesRU }
  },

attributes.js 的内容:

export const attributes = {
  mail: 'Эл.почта'
}

输入:

<input type="text" name="mail" v-validate="'required|email'">

但是没有成功，即使消息也没有被翻译，如果我添加:

ru: { message: ruValidation, attributes: attributesRU }

而不是:

ru: ruValidation

Answer 1

在不查看更多代码的情况下很难回答您的问题。我已经为您的输入元素设置了一个工作代码和框 here 。这成功地翻译了修改 i18n.locale 时的错误消息和字段。

组件:

<input type="text" name="mail" v-validate="'required|email'" />
{{ errors.first("mail") }}

index.js 中的设置:

import ru from "vee-validate/dist/locale/ru";
import en from "vee-validate/dist/locale/en";    
import VueI18n from "vue-i18n";

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: "ru"
});

Vue.use(VeeValidate, {
  i18n,
  dictionary: {
    ru: {
      messages: ru.messages,
      attributes: { mail: "Эл.почта" }
    },
    en: {
      messages: en.messages,
      attributes: { mail: "mail test" }
    }
  }
});