How to display an Error Message received by the Rest Api onto a specific field name?

Versions:

• VueJs: 2.3.3
• Vee-Validate: 2.0.0-rc.5

Description:

On the Login page, once the this.$validator.validateAll() is called the request goes to the back-end and when the request comes back with a 401 status code I need to display the incorrect username/password error message.

Steps To Reproduce:

This is how the existing cook looks like.

import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)

<input 
                            name="username"
                            v-validate="'required|email'"
                            v-model="vm.username" 
                            autofocus
                            class="input is-medium"
                            v-bind:class="{
                              'is-danger': errors.has('username'),
                              'is-success': !errors.has('username')
                            }"
                            type="email"
                            placeholder="[e-mail]"
                          />
                          <span class="icon user">
                            <i class="fa fa-user"></i>
                          </span>

validateBeforeSubmit: function (e) {
      this.$validator.validateAll()
      .then(() => {
        this.onSubmit()
      })
      .catch(() => { })
    }

onSubmit: function () {
  axios.post('auth', json)
  .then()
  .error(error => {
    // when 401 is received I want to add the value to the value to the error bag?
  })
}

[coderabsolute]

I got it, but for others posting the answer here.

this.errors.add({
      field: 'Item',
      msg: 'The item is expired.'
    });

[logaretm]

You can use

this.errors.add('credentials', msg);

where msg is the message you want to display, and just add it to the template using:

{{ errors.first('credentials') }}