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

创建一个计算的电子邮件规则，

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

然后在"v-text-field"中修改你的行：规则

:rules="emailRules"

Answer 2

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

当语言环境更改时，我根据更新规则进行了此混合，以刷新规则消息。

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 3

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