Vee-validate: this.error.add -> add message from dictionary

[gregorvoinov]

Versions:

• VueJs: 2.5.2
• Vee-Validate: 2.0.0-rc.21

Description:

I have a simple login form and if the user enters an incorrect password or username the error message gets displayed

<form action="POST" >
    <span v-show="errors.has('credentials')" class="help is-danger">{{ errors.first('credentials') }}</span>
    <p class="form-group">
    ...

onSignin() {
    axios.post(
        'api/user/signin',
        {
            email: this.email,
            password: this.password,
        },
        {
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
        },
    ).then((response) => {
            this.$router.push('dashboard');
        }).catch((error) => {
            this.errors.add('credentials', 'Wrong user or Password'); //this message i want to move to the dictionary
        });
    },

This works fine, but how can i add this message to the dictionary with localize that i have all my messages in one place?

[logaretm]

You can add the credentials as a custom rule for a computed field and let the validator handle adding the messages itself.

Or if you want to keep adding them manually you can first add the message template to the dictionary:

import { Validator } from 'vee-validate';

Validator.dictionary.merge({
  en: {
    messages: {
      credentials: 'Wrong user or password'
    }
  }
});

Then you need to fetch the message when adding it from the dictionary:

const message = this.$validator.dictionary.getMessage('en', 'credentials');
this.errors.add('credentials', message); //this message i want to move to the dictionary