[Vuejs]-I18n vue is not working when changing locale, using rules in text field of vuetify

by

5👍

✅

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"
👤Guizboule

4👍

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
      })
    },
  },
})
👤Dando Manos

2👍

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'
    }
  };
},
👤locutus

1👍

         <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!

👤Davis682

Leave a comment