интеграция vee-validate и vue-i18n при использовании настраиваемого правила - PullRequest
Новая
       37

интеграция vee-validate и vue-i18n при использовании настраиваемого правила

0 голосов
/ 21 марта 2019

Это вопрос об интеграции vee-validate и vue-i18n + дополнительное сообщение об ошибке для пользовательского правила.Я мог заставить каждую деталь работать в одиночку, но не всю комбинацию (это оправдание для длинного вопроса).

Ход программы следующий:

  1. Вебстраница, содержащая компонент vue.js, загружается с сервера.Компонент vue.js загружает vee-validate и vue-i18n и определяет пользовательское правило.Он не загружает предварительно никаких языковых данных - поэтому на created() он проверяет язык веб-страницы контейнера и загружает локализованные тексты с сервера с помощью вызова ajax.

  2. Это просто установитьэти сообщения для vue-i18n просто так:

    this.$i18n.mergeLocaleMessage(localeName, newLocaleMessages)

  3. Каким-то образом я должен сказать vee-validate также изменить его язык ... Я хочузагрузить соответствующий языковой стандарт vee-validate с его сообщениями об ошибках по умолчанию

и

Я хочу добавить свой собственный перевод сообщений об ошибках в сообщения проверки.

И здесь у меня проблемы

Хотя можно предварительно загрузить все необходимые vee-validate локализации, например, так: 

import en from 'vee-validate/dist/locale/en'
...
import de from 'vee-validate/dist/locale/de'
...
Vue.use(VeeValidate, {
  i18nRootKey: 'validations',
  i18n,
  dictionary: {
    en: en
    ...
    de: de
  }
})

Я не хочу делать это, поскольку это не такимеет смысл загружать множественные данные, если компонент не будет их использовать.

Лучше загружать данные динамически.

И если вы не используете vue-i18n, это прекрасно работает: 

if (this.$validator.dictionary.hasLocale(localeName)) {
   this.$validator.localize(localeName);
} else {
    import(`vee-validate/dist/locale/${localeName}`).then(locale => {
        this.$validator.localize(localeName, locale);
    });
}

/from ajax/ -> custom_dictionary = {
    /localeName/ : {
      messages: {
        customMessage: "TRanslation in /localeName/"
      }
    }
};

this.$validator.localize(custom_dictionary);

Но тогда я хочу использовать vue-i18n.Так что this.$validator... больше не работает.Также необходимо явно загрузить язык по умолчанию: 

Vue.use(VeeValidate, {
  i18nRootKey: 'validations',
  i18n,
  dictionary: {
    en: en
  }
})

, и когда я пытаюсь: 

import(`vee-validate/dist/locale/${localeName}`).then(locale => {
    this.$i18n.mergeLocaleMessage(localeName, locale)
or 
    this.$i18n.mergeLocaleMessage(localeName, locale.messages)
or
    this.$i18n.mergeLocaleMessage(localeName, locale.default.messages)

, он не работает (соответствующий объект в $i18n создается, но остается пустым).

Есть ли другой синтаксис, который будет работать?

Как-то неловко, что нельзя просто вызвать метод, подобный $validator.loadLanguage(localeName).then(set it to i18n).

Нельзя также определить по пользовательскому правилучто-то вроде: 

getMessage : () => { get the message from $i18n using this key}

, так как функция getMessage вызывается только один раз с загруженным в данный момент языком.

Другое ограничение заключается в том, что ключ сообщения должен быть именем пользовательского правила -поэтому каждый раз, когда я получаю его из API, мне нужно создать новый объект с этим именем и передать его в валидатор vv для его локализации (поместить в соответствующий словарь).

Так что в конце я фактически не могуПонимаете, какова прибыль от использования vee-validate, интегрированного с $ 1818?Я бы посоветовал использовать их только отдельно.Или где я не прав?

Любые идеи для безупречной интеграции очень ценятся.Заранее спасибо!

...