Как перевести имена полей с помощью 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 }
  },

Содержимое attribute.js:

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

Вход:

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

Но безуспешно, даже сообщения не переводятся, если я добавлю:

ru: { message: ruValidation, attributes: attributesRU }

вместо:

ru: ruValidation

javascript vue.js vue-i18n vee-validate
person Alexander Kim    schedule 26.12.2018    source источник
comment
Я не понимаю, чего ты хочешь. Вы хотите настроить словарь для отображения пользовательских сообщений?   -  person Pulkit Aggarwal    schedule 26.12.2018
comment
@PulkitAggarwal, посмотрите мой <input>, у него есть имя и правило проверки - обязательно. Если проверка не удалась, это показывает, что требуется поле mail, и после того, как я добавил русский язык, как я уже упоминал в вопросе, он обязательно перевел его на русский поле mail. Само сообщение переводится, но не имя поля, в моем случае это почта, я хочу перевести это письмо на другие языки. Надеюсь, я ясно объяснил.   -  person Alexander Kim    schedule 26.12.2018
comment
Связанный вопрос: stackoverflow.com/q/55045730/841830   -  person Darren Cook    schedule 15.08.2019
comment
medium.com/js-dojo/, наверное, я уже объяснял в своей статье.   -  person WebMan    schedule 09.05.2020

Ответы (3)


arrow_upward
2
arrow_downward

Трудно ответить на ваш вопрос, не видя больше вашего кода. Я установил рабочий код и ящик для вашего элемента ввода здесь. Это успешно переводит сообщение об ошибке и поле при изменении 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" }
    }
  }
});
person MJ_Wales    schedule 21.01.2019
comment
Это соответствует тому, как выглядит документация: baianat.github.io/vee -validate / guide / - person Darren Cook; 15.08.2019

arrow_upward
1
arrow_downward

Я мог бы заставить его работать, но я не знаю, лучшее ли это решение.

Я использую Laravel и пакет генератора для создания файлов перевода из файлы php lang.

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';

Для управления файлами перевода я рекомендую использовать BabelEdit.

person ndberg    schedule 16.08.2019

arrow_upward
-1
arrow_downward

Вы можете сделать такой словарь

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

export default dictionary;

Вы должны импортировать его в свой компонент и добавить в библиотеку валидатора следующим образом

this.$validator.localize(dictionary);

Надеюсь, это решит вашу проблему.

person Pulkit Aggarwal    schedule 26.12.2018
comment
Да, но я использую i18n, а не локализацию vee-validate. - person Alexander Kim; 26.12.2018