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

    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>