なにこれ
Vuetify + VeeValidateで入力チェックする際に、VueI18nを使ってエラーメッセージを多言語対応・共通化する方法について紹介します。
定義方法
VeeValidate
VeeValidateであらかじめ言語毎にエラーメッセージを用意しているので、そちらを使います。
※i18nRootKeyについては後述のvuei18nのメッセージファイルで詳細を説明します。
VeeValidateの定義
import Vue from 'vue';
import VeeValidate from 'vee-validate';
// VeeValidateで用意されている日本語版入力チェックエラーメッセージを使う
import ja from 'vee-validate/dist/locale/ja';// VeeValidateで用意されている英語語版入力チェックエラーメッセージを使う
import en from 'vee-validate/dist/locale/en';// VueI18nオブジェクトをインポートする
import { i18n } from './i18n';
Vue.use(VeeValidate,
// オプションでi18nを指定する
{
i18n,
i18nRootKey: 'validations',
dictionary: { ja, en },
}
);VueI18n
こちらは以前「VueI18nをscriptタグやJSファイル内で使う方法」で紹介したものと同様です。
VueI18nの定義
import Vue from 'vue';
import VueI18n from 'vue-i18n';
// メッセージ定義はjsonファイルから読み込む
const messages = require('./i18n.json');
Vue.use(VueI18n);
// ブラウザ言語を取得
const language = (
(
window.navigator.languages
&& window.navigator.languages[0]
)
|| window.navigator.language
|| window.navigator.userLanguage
|| window.navigator.browserLanguage
|| 'ja'
);
const locale = language.substr(0, 2) === 'ja' ? 'ja' : 'en';
// VueI18nで使う言語はブラウザ言語とする
export const i18n = new VueI18n({
locale,
messages,
});
VueI18nのメッセージファイル
VeeValidateの定義でi18nRootKey: 'validations',と指定したので、
メッセージファイルでは、言語別にvalidationsというプロパティを定義します。
その中のattributesでエラー項目名を指定できます。
VueI18nのメッセージファイル(JSONファイル)
{
"ja": {
"validations": { "attributes": { "contractName": "契約名",
}
}
},
"en": {
"validations": { "attributes": { "contractName": "ContractName",
}
}
},
}Vueファイルでの使い方
Vuetifyのv-text-fieldタグの場合、以下のように実装します。
<template>
<v-text-field
v-model="editedItem.name"
<!-- VeeValidateでの項目名を定義 -->
<!-- ※i18nのメッセージファイルで定義している項目名と合わせる --> data-vv-name="contractName" <!-- data-vv-nameで定義した名前でエラーメッセージを取得する --> :error-messages="errors.collect('contractName')" >
</v-text-field>
<button @click="validate">入力チェック</button>
</template>
<script>
export default {
data() {
return {
editedItem: {
name: '',
},
};
},
methods: {
async validate() {
const valid = await this.$validator.validateAll(); if (!valid) {
console.log('入力チェックNGです！！！');
}
}
}
}
</script>以上です🍅
