Question

这是有关vee-validate和vue-i18n的集成以及自定义规则的其他错误消息的问题。我可以让每个细节都可以单独工作，但不能让整个组合工作（这是长问题的借口）。

程序流程如下：

一个包含vue.js组件从服务器加载的网页。 vue.js组件加载vee-validate和vue-i18n并定义自定义规则。它不会预加载任何语言数据-如此created()会检查容器网页的语言，并通过ajax调用从服务器加载它的本地化文本。
只需将以下消息设置为vue-i18n即可：

this.$i18n.mergeLocaleMessage(localeName, newLocaleMessages)
我还必须以某种方式告诉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验证程序以对其进行本地化（放入它在相应的词典中）。

因此，最后我实际上无法理解使用与$ i18n集成的vee-validate有什么好处？我会考虑单独使用它们。还是我在哪里错了？

任何有关完美集成的想法都将受到赞赏。预先感谢！

使用自定义规则时进行vee-validate和vue-i18n集成

0 个答案: