vee validate does not work

Question

vee validate does not work

Navigation

#1 by (1 votes)
#2 by (1 votes)

-1

I'm doing tests with vuejs and the library VeeValidate which is to validate fields in a form.

I have an example to validate an email field like the following:

<form>
  <div class="form-group" :class="{'has-error': errors.has('email') }" >
      <label class="control-label" for="email">Email</label>
      <input v-model="email" v-validate="email" data-rules="required|email" class="form-control" type="email" placeholder="Email">
      <p class="text-danger" v-if="errors.has('email')">{{ errors.first('email') }}</p>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

The problem is that when I do the test in a browser, vue.js does not interpolate the variables and shows something like the following:

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

The versions I'm using from vue.js and VeeValidate are the following:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.25/vee-validate.min.js"></script>

The complete code is in the next gist :

Can someone tell me what the code is missing or what I'm doing wrong?

javascript vue.js

asked by Sanx 16.04.2017 в 20:50

source

2 answers

Error SQLSTATE [HY000]: General error: 1366 inserting CVS with PHP Mysql? Labyrinth recursive algorithm

score 1 · Answer 1

vue.js is not a framework that works out of the box , that is, that you do not have to configure anything. For Vue.js to handle the DOM of the document (virtually) it must mount Vue on it. And this you do with the $mount method:

new Vue({ ... }).$mount('#app');

Before mounting Vue is when you should add the plugins:

Vue.use(VeeValidate);
new Vue({
 data: () => ({

 }),
 methods: {

 },
}).$mount('#app');

score 1 · Answer 2

You must enclose the contents of the directive in quotes like this example: You must replace v-validate="email" with v-validate="'email'" .

I personally delete data-rules="required|email" and only use the directive.

I'll add the example in jsfiddle basic validation with vee-validate