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

在我看来，关于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: ruValidation

---

你可以做一本这样的字典

const dictionary = {
  en: {
    messages: {
      required: (field, val) => `Field ${field} is required`
    }
  },
  ru: {
    messages: {
      required: (field, val) => `поле ${field} обязательно`
    }
  },
};

export default dictionary;

您必须在组件中导入它，并像下面这样添加到验证程序库中

this.$validator.localize(dictionary);

---

希望这能解决您的问题。

在没有看到更多代码的情况下，很难回答您的问题。我已经为您的输入元素设置了一个工作代码沙盒。当i18n.locale被修改时，这将成功地转换错误消息和字段

组成部分：

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

---

我可以让它工作，但我不知道这是否是最好的解决方案

我正在使用Laravel和a从php语言文件中创建翻译文件

JS文件：

/**
 * For translations in Vue use i18n Package
 */
import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated';
Vue.use(VueInternationalization);
const i18n = new VueInternationalization({
    locale: 'de',
    messages: Locale
});


/**
 * Form Validation
 */
import VeeValidate from 'vee-validate';
import { ValidationProvider } from 'vee-validate';
import de from 'vee-validate/dist/locale/de';
import en from 'vee-validate/dist/locale/en';
import fr from 'vee-validate/dist/locale/fr';
Vue.use(VeeValidate, {
    i18n,
    dictionary: {
        en: {
            messages: en.messages,
            attributes: Locale.en.attributes, // I use a lang file called attributes
        },
        de: {
            messages: de.messages,
            attributes: Locale.de.attributes,
        },
        fr: {
            messages: fr.messages,
            attributes: Locale.fr.attributes,
        },
    },
});

要更改JS中的区域设置，请执行以下操作：

i18n.locale = 'fr';

---

对于管理翻译文件，我建议使用

我不明白您想要什么。是否要自定义显示自定义消息的词典？@PulkitAggarwal，请查看我的

，它有一个名称和验证规则-必需。如果验证失败，它将显示“需要现场邮件”，并且在我添加了一个俄语区域设置后，正如我在问题中提到的，它将其翻译为俄语“Пзззззззззб”。消息本身被翻译，但不是字段名，在我的例子中是“邮件”，我想把“邮件”翻译成不同的语言。我希望我解释清楚。相关问题：我想我已经在我的文章中解释过了。是的，但我使用的是i18n，而不是vee validate的本地化。这与文档的外观相匹配：

/**
 * For translations in Vue use i18n Package
 */
import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated';
Vue.use(VueInternationalization);
const i18n = new VueInternationalization({
    locale: 'de',
    messages: Locale
});


/**
 * Form Validation
 */
import VeeValidate from 'vee-validate';
import { ValidationProvider } from 'vee-validate';
import de from 'vee-validate/dist/locale/de';
import en from 'vee-validate/dist/locale/en';
import fr from 'vee-validate/dist/locale/fr';
Vue.use(VeeValidate, {
    i18n,
    dictionary: {
        en: {
            messages: en.messages,
            attributes: Locale.en.attributes, // I use a lang file called attributes
        },
        de: {
            messages: de.messages,
            attributes: Locale.de.attributes,
        },
        fr: {
            messages: fr.messages,
            attributes: Locale.fr.attributes,
        },
    },
});

i18n.locale = 'fr';