CODEWITHSUNDEEP
vue.jsvuetify.jsvue-i18n
Matt Nguyen
Matt Nguyen

Reputation: 45

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?

Upvotes: 0

Views: 5046

Answers (4)

locutus
locutus

Reputation: 21

The solution of SteDeshain from this open github issue works for me:

template:

<v-text-field
    v-model="userState.username"
    :rules="[rules.required, rules.mail]"
>
    <template #message="{ message }">
        {{ $t(message) }}
    </template>
</v-text-field>

js:

data () {
  return {
    show1: false,
    rules: {
      required: v => !!v || 'rules.notEmpty',
      mail: v=> /^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,6})$/.test(v) || 'rules.mail'
    }
  };
},

Upvotes: 2

Dando Manos
Dando Manos

Reputation: 41

I think vuetify takes the message when rule has just to fail.

I did this mixin based on update rules when locale has changed, in order to refresh rules message.

import Vue from 'vue'

export default Vue.extend({
  data: () => ({
    formActive: true,
  }),
  computed: {
    requiredRules() {
      return this.formActive
        ? [(val: string) => !!val || this.$t('errors.requiredField')]
        : []
    },
  },
  methods: {
    updateLocale() {
      this.formActive = false
      this.$nextTick(() => {
        this.formActive = true
      })
    },
  },
})

Upvotes: 4

Davis682
Davis682

Reputation: 11

         <v-select
              :items="getAllPriceGrups"
              item-text="name"
              @input="getPrices"
              v-model="priceG"
              filled
              :rules="rulesRequired($t('global.needToFillOut'))"
              return-object
          ></v-select>

 methods: {
    rulesRequired(role) {
      return [value => !!value || role];
    },
}

This works for me!

Upvotes: 1

Guizboule
Guizboule

Reputation: 195

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"

Upvotes: 5

Related Questions