Vuetifyで多言語対応させる場合、いくつかポイントがあるのでまとめておく。
Vuetifyで普通のバリデーションはこちら
laravel + vue で構築している場合多言語を実装するために、vuex-i18nを使用する場合
scriptのdataに$t('validation.required')を定義しても反映されないので、mountedのタイミングでrulesを定義する。
template
<v-text-field
v-model="email"
:rules="[emailRules.required, emailRules.regex]">
</v-text-field>
script
<script>
data: () => ({
email: null,
emailRules: {
required: '',
regex: '',
},
}),
mounted() {
this.setRules()
},
methods:{
setRules(){
this.emailRules.required = v => !!v || this.$t('validation.required')
this.emailRules.regex = v => (v && v => /.+@.+\..+/.test(v)) || this.$t('validation.regex')
},
},
</script>