如何在 vuetify 中使用 i18n 配置 vee-validate？答案

【问题标题】：How to configure vee-validate with i18n in vuetify?如何在 vuetify 中使用 i18n 配置 vee-validate？
【发布时间】：2021-04-05 13:59:10
【问题描述】：

我想在我的 vuetify 项目中自定义本地化 (en,ar)。这是我的文件。分为 3 个主要文件。

Component.vue

import { ValidationProvider, ValidationObserver } from 'vee-validate';
  components: {
    ValidationProvider,
    ValidationObserver,
  },

<validation-observer
  ref="observer"
  v-slot="{ invalid }"
>
  <form @submit.prevent="submit">
    <validation-provider
      v-slot="{ errors }"
      name="Name"
      rules="required"
    >
      <v-text-field
        v-model="name"
        :counter="10"
        :error-messages="errors"
        label="Name"
        required
      ></v-text-field>
    </validation-provider>
    <v-btn
      class="mr-4"
      type="submit"
      :disabled="invalid"
    >
      submit
    </v-btn>
  </form>
</validation-observer>

localization.js

import Vue from 'vue';
import { extend, localize } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', required);

// Install English and Arabic localizations.
localize({
  en: {
    messages: en.messages,
    names: {
      name: 'E-mail Address',
    },
    fields: {
      name: {
        required: 'is too short, you want to get hacked?',
      },
    },
  },
  ar: {
    messages: ar.messages,
    names: {
      name: 'البريد الاليكتروني',
    },
    fields: {
      name: {
        required: 'كلمة السر قصيرة جداً سيتم اختراقك',
      },
    },
  },
});
localize(ar);

main.js

import "./common/validations";

如果我更改 localize(ar)，它只会显示英文，我是否缺少某些东西？（稍后将使用按钮更改本地化。

【问题讨论】：

您的vee-validate.js 是什么样的？看看这个小提琴：codesandbox.io/s/…
我完全喜欢那个代码框，但没有用。知道为什么吗？ @maxshuty
你能发布更多你的代码吗？您使用的是什么版本的 VeeValidate？
vee 验证 3.4。顺便说一句，验证没问题，但我无法更改本地化。你有别的方法吗？ @maxshuty

标签： vue.js vuetify.js vee-validate

【解决方案1】：

您应该提及您使用的是哪个版本的 vee-validate。我猜是v3。

根据文档，如果您要安装语言环境而不激活它们，根本地化对象必须包含语言的键，因此：

// ⛔️ Doesn't work
localize(ar);

// ✅ installs locale but doesn't activate it
localize({ ar });

// ✅ installs and activates locale
localize('ar', ar);

查看更多details here

【讨论】：