我在应用程序中使用表单验证,我希望翻译验证错误消息。仅在重置表格后才会翻译。
我尝试过在计算属性中进行翻译,当我这样做时它就可以工作 计算如下,但触摸后错误消息不会消失:
{
return [this.$t('LANGUAGE')]
}
应用内组件
<template>
<div id="app">
<grid_Component/>
<div class="locale-changer" style="background: black">
<select v-model="$i18n.locale">
<option v-for="(lang, i) in lang" :key="`Lang${i}`" :value="lang">{{
lang }}
</option>
</select>
</div>
</div>
</template>
<script>
import form_Component from './components/form_Component.vue'
import form_Component from './components/form_Component.vue'
import i18n from './i18n'
export default {
data () {
return{
lang: ['GB', 'NO']
}
},
name: 'app',
components: {
form_Component,
},
}
</script>
GB.json文件
{
"LANGUAGE": "English"
}
NO.json文件
{
"LANGUAGE": "Norwegian"
}
表单组件
<template>
<v-form ref="form" v-model="valid" lazy-validation>
<v-text-field v-model="name" :counter="10" :rules="nameRules"
label="Name" required>
</v-text-field>
<v-btn :disabled="!valid" color="success" @click="validate">
Validate
</v-btn>
<v-btn color="error" @click="reset">
Reset Form
</v-btn>
<v-btn color="warning" @click="resetValidation">
Reset Validation
</v-btn>
</v-form>
</template>
<script>
export default {
data: () => ({
valid: true,
name: '',
}),
methods: {
validate () {
if (this.$refs.form.validate()) {
this.snackbar = true
}
},
reset () {
this.$refs.form.reset()
},
resetValidation () {
this.$refs.form.resetValidation()
}
},
computed: {
nameRules(){
return [v => !!v || this.$t('LANGUAGE')]
}
}
}
</script>