Search code examples
vue.jsvuetify.jsvue-i18n

i18n vue is not working when changing locale, using rules in text field of vuetify


Using Vuei18n and Vuetify make me confuse this point

This is my code (I noted the weird thing in-line):

<v-form @submit.prevent="login" v-model="valid" ref="form">
  <v-text-field
    prepend-icon="person"
    name="login"
    :label="$t('Login')" <-- This line is still translated automatically
    type="email"
    v-model="email"
    :rules="[v => !!v || $t('E-mail is required')]" <-- This line is not translated automatically
  ></v-text-field>
  ...
</v-form>

How can I translate automatically the message under the input form?


Solution

  • Create a computed emailRules,

    computed: {
        emailRules() {
          return [
            v => !!v || $t('E-mail is required')
          ];
        }
      },
    

    Then modify your line :rules in your "v-text-field"

    :rules="emailRules"