CODEWITHSUNDEEP
javascriptvue.jsvuejs2nuxt.js
Daniel Hutton
Daniel Hutton

Reputation: 1455

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

I have installed vee-validator in my nuxt.js install (using the express template).

I have added the plugin into my nuxt.config.js file like so:

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

I have also added it into the build settings:

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

When I use the HTML tags e.g. v-validate="'required'", the validation is working as expected, and I can show/hide errors in the template.

Now I am trying to set up a form so that when it is submitted, all fields will be validated and errors will only be displayed after an attempted submission. To do this, I have set up a method like so:

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

For some reason, the this.$validator is undefined. Can someone tell me how I can access it please? I have tried adding:

inject: ['$validator']

but this didn't seem to make any difference.

Thanks for any help.

Upvotes: 1

Views: 3085

Answers (1)

Daniel Hutton
Daniel Hutton

Reputation: 1455

Turns out the problem was using the ES6 function style, got in the habit of using it from Angular!

Changed:

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

to:

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

and now it works fine.

Upvotes: 2

Related Questions