VeValidate를 vue-i18n과 통합하는 방법

VeValidate를 vue-i18n과 통합하는 방법

클릭 이벤트로 vue-i18n 언어를 변경합니다.vee-validate 사전을 같은 언어로 변경합니다.

main.discloss.main.discloss.

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 folder > lang/index.folder

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-displays folder > src/validations.displays.

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 사전으로 변경할 수 없습니다.뭘 놓쳤지?

가까이 있는 것 같은데 중요한 부분이 몇 개 빠졌네요.

VeeValidate를 배선할 때 다음과 같은 객체를 전달할 수 있습니다.

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

물론 여기에 사전을 인라인으로 넣었을 뿐이므로 별도의 파일로 보관하여 Import하는 것이 좋습니다.

나 스스로 방법을 알아냈어.

마운트된 사이클 훅 안에 설정된 App.vue

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

언급URL : https://stackoverflow.com/questions/62582753/how-to-integrate-veevalidate-with-vue-i18n