CODEWITHSUNDEEP
javascriptvue.jsvalidationvee-validate
Charlie
Charlie

Reputation: 57

Error in validation in vue js using vee-validate

I'm new to vue.js. I'm trying to add validations for a form using vee-validate library, I get these errors:

Property or method "errors" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Error in render function: "TypeError: Cannot read property 'has' of undefined"

vue.version = ^2.3.3

vee-validate.version = ^3.4.5 the code is:

<div class="tile is-parent">
      <article class="tile is-child box">
      <h1 class="title">Add new AC Default</h1>
          <form>
            <div class="field">
              <label class="label">Name</label>
              <div class="control">
                <input name="name"
                       v-model="form.name"
                       v-validate="'required|min:3'"
                       v-bind:class="{'is-danger': errors.has('name')}"
                       class="input" type="text" placeholder="Full name">
              </div>
              <p class="help is-danger" v-show="errors.has('name')">
                {{ errors.first('name') }}
              </p>
           </div>
          </form>
      </article>
</div>

The script is:

import Vue from 'vue';
...

export default {
    components: {
      ...
    },
    data() {
      return {
        form: {
          entityId: '',
          defaultValue: '',
          displayName: '',
          name: '',
        },
      };
    },
    created() {
      this.getInitialData();
    },
    computed: {
      ...
    },
    methods: {
     
      getInitialData() {
        ...
      },
    },
  };

What am I missing here?

Upvotes: 1

Views: 2857

Answers (1)

maxshuty
maxshuty

Reputation: 10720

You're trying to use errors but it is not defined in your data or as a prop.

When you instantiate VeeValidate you can pass it an errorBagName like this:

Vue.use(VeeValidate, {
    events: 'blur',
    errorBagName: 'vErrors',
});

Then in your components you can collect the errors by vErrors.collect('name'). I would also suggest naming your error bag something more verbose like vErrors instead of just errors to prevent potential conflicts.

Upvotes: 1

Related Questions