【问题标题】:How to localize error messages in vuejs using vee-validation如何使用 vee-validation 本地化 vuejs 中的错误消息
【发布时间】:2018-10-13 09:39:44
【问题描述】:

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

“Uncaught TypeError: Cannot read property 'localize' of undefined”

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

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
  }
})

【问题讨论】:

    标签: vue.js vuejs2 vee-validate


    【解决方案1】:

    在您的代码示例中,this.$validator 在不知名的地方被调用...您需要将它放在您的 Vue 实例中,例如在挂载的钩子中:

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

    【讨论】:

    • mounted() 和 created() 有什么区别??
    • @Ashwini 可以查看VueJS documentation,Vue 实例生命周期解释的很好:)
    • 好的,我可以进去看看。我是 vuejs 的新手。这就是为什么会有很多疑问和问题。请不要生气。如果你能回答这个link
    • 谢谢@sovalina。这是link 的原因是什么。这个有什么解决办法吗?? ——
    【解决方案2】:

    如果我们要更改所有默认消息,请包括一些属性更改。 定义你的消息,然后挂载到主 js 文件中

             const dict = {
                messages: {
                    required: (field) => 'Please Enter ' + field + ''
                },
                attributes: {
                    name: 'Name',
                    email: 'Email Id '
                }
            }
            const app = new Vue({
                el: '#app',
                router: router,
                components: {
                    App
                },
                mounted() {
                    this.$validator.localize('en', dict);
                }
            });
    
      //  Make to change in single required message
        const dict = {
            custom: {
                email: {
                    required: 'Please Enter Valid Email Id'
                },
                name: {
                    required: 'Name include first and last name'
                }
            }
        }
        const app = new Vue({
            el: '#app',
            router: router,
            components: {
                App
            },
            mounted() {
                this.$validator.localize('en', dict);
            }
        });
    

    【讨论】:

      猜你喜欢
      • 2020-03-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-12-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多