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

Question

我想在我的 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)，它只显示英文，我是否遗漏了什么？（稍后我会用按钮更改本地化。

Answer 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

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

How to configure vee-validate with i18n in vuetify?

vue.js

vuetify.js

vee-validate