-1

Estoy haciendo pruebas con y la libreria VeeValidate que es para validar campos en un fomulario.

Tengo un ejemplo para validar un campo de email como el siguiente:

<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>

El problema es que cuando hago la prueba en un browser, no hace la interpolación de las variables y me muestra algo como lo siguiente:

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

Las versiones que estoy usando de y VeeValidate son las siguientes:

<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>

El codigó completo esta en el siguiente gist:

¿Alguien me puede decir qué es lo que le falta al código o qué es lo que estoy haciendo mal?

1
  • Bienvenido Sanx. Cuando publiques código hazlo aquí porque si por casualidades de la vida, eliminas ese gist, entonces la pregunta pierde contexto.
    – gugadev
    Commented el 16 abr. 2017 a las 20:13

2 respuestas 2

1

no es un framework que funcione out of the box, es decir, que no tengas que configurar nada. Para que Vue.js maneje el DOM del documento (virtualmente) se debe montar Vue en él. Y esto lo haces mediante el método $mount:

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

Antes de montar Vue es cuando debes de añadir los plugins:

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

 }),
 methods: {

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

Debes encerrar entre comillas lo contenido en la directiva como este ejemplo: debes de sustituir v-validate="email" por v-validate="'email'".

Yo personarmente eliminaria data-rules="required|email" y solo usaria la directiva.

Te agrego el ejemplo en jsfiddle validacion basica con vee-validate

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.