使用 nuxt.js 时如何获取 vee-validator 的 $validator答案

【问题标题】：How to get vee-validator's $validator when using nuxt.js使用 nuxt.js 时如何获取 vee-validator 的 $validator
【发布时间】：2017-12-08 05:18:34
【问题描述】：

我在我的nuxt.js 安装中安装了vee-validator（使用express template）。

我已将插件添加到我的nuxt.config.js 文件中，如下所示：

plugins: [
    { src: '~plugins/vee-validate.js' }
]

我也将它添加到构建设置中：

build: {
    vendor: ['vee-validate'],
    ...

当我使用 HTML 标签时，例如v-validate="'required'"，验证按预期工作，我可以在模板中显示/隐藏错误。

现在我正在尝试设置一个表单，以便在提交时，所有字段都将被验证，并且只有在尝试提交后才会显示错误。为此，我设置了这样的方法：

  methods: {
    onLogin: (e) => {
      e.preventDefault()
      console.log('validator', this.$validator)
    }
  }

由于某种原因，this.$validator 未定义。有人可以告诉我如何访问它吗？我已经尝试添加：

inject: ['$validator']

但这似乎没有任何区别。

感谢您的帮助。

【问题讨论】：

标签： javascript vue.js vuejs2 nuxt.js

【解决方案1】：

原来问题出在使用 ES6 函数样式，养成了从 Angular 使用它的习惯！

改变：

methods: {
    onLogin: (e) => {
      e.preventDefault()
      console.log('validator', this.$validator)
    }
}

到：

methods: {
    onLogin: function (e) {
      e.preventDefault()
      console.log('validator', this.$validator)
    }
}

现在它可以正常工作了。

【讨论】：

首选语法其实是使用方法简写：onLogin(e) {}