Vuetifyでのバリデーションまとめ(多言語対応)

Vuetifyで多言語対応させる場合、いくつかポイントがあるのでまとめておく。

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>