Estoy tratando de activar una función que valida un campo de entrada cuando pierde el foco usando nuxtjs. Cuando enfoco fuera del campo de entrada, la función no se activa, pero se activa cuando enfoco y empiezo a escribir en otro o en el mismo campo de entrada.
<div class="control"> <input class="input" type="text" ref="email" @blur="validateMail()" v-model="email_p" name="email" /> </div>esta es la llamada de funcion
methods: { validateMail(){ let value = this.$refs.email.value let mailformat = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ if (value.match(mailformat)) { //validation passed } else { this.msg.email = 'Enter a valid email'; } }, }Esto puede funcionar bien
<template> <div class="control"> <input ref="email" v-model="email_p" class="input" type="text" name="email" @blur="validateMail" /> message: {{ msg.email }} </div> </template> <script> export default { data() { return { email_p: '', msg: { email: '', }, } }, methods: { validateMail(value) { const mailformat = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ if (value.target.value.match(mailformat)) { // validation passed } else { this.msg.email = 'Enter a valid email' } }, }, } </script> No necesita usar $refs para acceder al elemento, puede acceder al evento directamente.
Si desea obtener el value a través $refs , deberá esperar a que se active una tick completa para obtener el nuevo valor real. Por lo tanto, use el event pasado por @blur , más simple, más limpio y menos desordenado.
Además, value.target.value es importante porque recibe un evento y no el elemento HTML en sí.
PD: el evento también se puede escribir como @blur="validateMail($event)" si quieres ser más explícito pero no es obligatorio (ya lo está pasando por sí mismo).