如何将VeeValidate与vue-i18n集成?

时间:2020-06-25 19:16:22

标签: javascript vue.js vuejs2 vee-validate vue-i18n

通过单击事件,我更改了vue-i18n语言,我想将vee-validate词典更改为相同的语言

main.js

import VeeValidate from 'vee-validate'
import validations from './validations.js'
import i18n from './lang'
Vue.use(VeeValidate)
new Vue({
   router,
   store,
   i18n,
   render: h => h(App)
}).$mount('#app')

vue-i18n文件夹> lang / index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './locals/en'
import es from './locals/es'

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'en',
  messages: {
    en: {
      lang: en
    },
    es: {
      lang: es
    }
  }
})

vee-validate文件夹> src / validations.js

import {Validator} from 'vee-validate'
const dictionary = {
    en: {
        custom: {
            signupEmail: {
                required: 'Error',
            },
              
        }
    },
    es: {
        custom: {
            signupEmail: {
                required: 'Hubo un error',
            },
              
        }
    }    
}
Validator.localize(dictionary)
const validator = new Validator()
validator.localize('en')
export default Validator

我正在尝试将validator.localize('en')作为目标,即使我手动将其更改为validator.localize('es'),我也无法更改为es词典。我缺少什么?

2 个答案:

答案 0 :(得分:2)

您似乎已经接近,但缺少一些关键要素。

在连接VeeValidate时,您可以pass an object这样:

Vue.use(VeeValidate, {
   i18nRootKey: 'custom', // customize the root path for validation messages.
   i18n,
   dictionary: {
    en: {
    custom: {
        signupEmail: {
            required: 'Error',
        },        
      }
    },
    es: {
    custom: {
        signupEmail: {
            required: 'Hubo un error',
        },    
       }
     }
   }
});

很明显,我只是将您的字典放在此处,最好将它保留为一个单独的文件并以这种方式导入。

答案 1 :(得分:0)

我弄清楚了自己该怎么做。

在已安装的自行车钩内的App.vue中

VeeValidate.Validator.locale = `${language}`