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

Question

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

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

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

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

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

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

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

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

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

inject: ['$validator']

但这似乎没有任何区别。

感谢您的帮助。

Answer 1

原来是使用ES6函数风格的问题，从Angular养成了使用习惯！

已更改：

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

至：

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

现在可以正常使用了。

How to get vee-validator's $validator when using nuxt.js