Question

我在应用程序中使用表单验证，我希望翻译验证错误消息。仅在重置表格后才会翻译。

我尝试过在计算属性中进行翻译，当我这样做时它就可以工作计算如下，但触摸后错误消息不会消失：

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

验证错误的vue-i18n转换仅在以vuetify格式重置表单后才有效

0 个答案: