如何使用 vee-validation 在 vuejs 中本地化错误消息 [英] How to localize error messages in vuejs using vee-validation

问题描述

我想使用 vee-validation 本地化一些消息和属性名称.我只能在使用时本地化消息 例如: this.$validator.localize('en', { messages: { required: (field) => '* ' + field + required'}, attributes: { email: 'Email' }}); 在created()"函数中.但我想在main.js"中给出这个.每当我在 main.js 中调用它时，它都会抛出如下错误:

I want to localize some of the messages and attributes name using vee-validation. I'm able to localize the messages only when using E.g: this.$validator.localize('en', { messages: { required: (field) => '* ' + field + required'}, attributes: { email: 'Email' }}); inside the "created()" function. But I would like to give this in the "main.js". Whenever I'm calling this in the main.js it's throwing error like:

未捕获的类型错误:无法读取未定义的属性 'localize'"

我在 main.js 中的代码.我在 main.js 中给出了这段代码，因为我想在所有 vue 文件中访问我的项目.下面是我的代码.

My code in main.js. I have given this code in main.js because I would like to access through out my project in all vue files. Below is my code.

import Vue from 'vue'
import App from './App'
import router from './router'
import VeeValidate from 'vee-validate';
import { Validator } from 'vee-validate';

Vue.use(VeeValidate);

this.$validator.localize('en', {
      messages: {
        required: (field) => '* ' + field + ' is required'
      },
      attributes: {
        email: 'Email'
      } 
    });

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

推荐答案

在你的代码示例中，this.$validator 被调用在不知道的地方......你需要把它放在你的Vue 实例，以挂载钩子为例:

In your code example, this.$validator is called in the middle of nowhere... you need to put it inside your Vue instance, in the mounted hook for example :

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  },
  mounted() {
    this.$validator.localize('en', {
      messages: {
        required: (field) => '* ' + field + ' is required'
      },
      attributes: {
        email: 'Email'
      } 
    })
  }
})

这篇关于如何使用 vee-validation 在 vuejs 中本地化错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！