i18n Vue 在更改语言环境时不起作用，在 vuetify 的文本字段中使用规则

Question

使用 Vuei18n 和 Vuetify 让我混淆了这一点

这是我的代码（我注意到了行内的奇怪之处）：

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

如何自动翻译输入表单下的消息？

Answer 1

创建计算的 emailRules，

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

然后在 "v-text-field"

中修改你的行 :rules

:rules="emailRules"

Answer 2

         <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];
    },
}

这对我有用！

Answer 3

我认为 vuetify 在规则刚刚失败时接收消息。

当语言环境发生变化时，我根据更新规则做了这个 mixin，以刷新规则消息。

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
      })
    },
  },
})

Answer 4

这个未解决的 github 问题中 SteDeshain 的解决方案对我有用：

模板：

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

i18n Vue 在更改语言环境时不起作用，在 vuetify 的文本字段中使用规则

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

vue.js

vuetify.js

vue-i18n