Estoy intentando mostrar errores con Vuelidate en un formulario con Laravel y Vue. El problema que estoy teniendo es que no me está apareciendo el span en la vista, pero si me meto en la consola si que aparece el código o desaparece según la validación.
Por una parte tengo en el componente:
<template>
<form method="POST" @submit.prevent="registrarUsuarios" id="validated-form">
<input type="hidden" name="_token" :value="csrf">
<div class="form-row">
<div class="form-group col-md-6">
<label for="nombre">{{ 'register.name' | trans }}</label>
<input id="nombre" v-model="usuario.nombre" type="text" class="form-control" :class="{ 'error': $v.usuario.nombre.$invalid, 'valid': !$v.usuario.nombre.$invalid }" name="name" required autocomplete="nombre" autofocus>
<span v-if="!$v.usuario.nombre.required" class="invalid-feedback" role="alert">
<strong>El nombre es obligatorio {{ !$v.usuario.nombre.required }}</strong>
</span>
</div>
</div>
</form>
</template>Este es el script que tengo en el componente:
<script>
import { required, minLength, between } from 'vuelidate/lib/validators';
export default {
data() {
return {
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
usuarios: [],
usuario: {
nombre: '',
apellidos: '',
email: '',
login: '',
imagen: '',
password: '',
password_confirmation: '',
perfil_id: '',
idioma_iso: '',
economato: false,
activo: false
},
errors: {}
}
},
props: ['perfiles', 'idiomas'],
validations: {
usuario: {
nombre: {
required,
minLength: minLength(2)
}
}
},
methods: {
registrarUsuarios: function () {
this.errors = [];
const params = {
nombre: this.usuario.nombre,
apellidos: this.usuario.apellidos,
email: this.usuario.email,
login: this.usuario.login,
imagen: this.usuario.imagen,
password: this.usuario.password,
password_confirmation: this.usuario.password_confirmation,
perfil_id: this.usuario.perfil_id,
idioma_iso: this.usuario.idioma_iso,
economato: this.usuario.economato,
activo: this.usuario.activo
};
axios.post('/users/create', params)
.then(response => {
} else {
}
}).catch(error => {
})
}
},
mounted() {
console.log('Component mounted.');
}
}
</script>Funciona todo correctamente, es decir, si el input está vacío el border se pone en rojo, si tiene menos de dos caracteres aparece en rojo y si está todo correcto se pone en verde.
No entiendo por qué motivo no aparecen los mensajes que tengo declarados en el span cuando realmente sí están apareciendo en el DOM.
