Tengo el siguiente componente vue donde estoy cambiando la clase de la fila principal en función de si una entrada está enfocada o no
<template> <div class="form form--login"> <div class="form__row" :class="{entered: emailEntered}"> <label class="form__label" for="login-form-email">Email address</label> <input type="text" class="form__control form__control--textbox" name="email-address" id="login-form-email" @focus="emailEntered = true" @blur="handleBlur($event, emailEntered)"> </div> <div class="form__row" :class="{entered: passwordEntered}"> <label class="form__label" for="login-form-password">Password</label> <input type="password" class="form__control form__control--textbox form__control--password" name="password" id="login-form-password" @focus="passwordEntered = true" @blur="handleBlur($event, passwordEntered)"> </div> </div> </template> <script> export default { name: 'login-form', data() { return { emailEntered: false, passwordEntered: false, } }, methods: { handleBlur(e, enteredBool) { if (e.currentTarget.value.trim() === '') { // this doesn't do anything - I can do an if else statement to change this.passwordEntered or this.emailEntered based on the name of the current target, but how do I change the value by passing it into the method? enteredBool = false; } }, } } </script>pero no parece cambiar la variable que se pasa al método. ¿Cómo paso una variable de datos al método y cambio su valor? ¿O debería hacerlo de otra manera? Realmente no quiero estar haciendo una declaración if else ya que puedo tener un formulario que tiene muchas más entradas y creo que sería realmente ineficiente de mantener
También pensé que podría hacer algo en @bur como puedes hacer @blur="passwordEntered = false" , pero no estaba seguro de cómo verificar si el campo estaba vacío o no.
Para cambiar la variable, debe referirla usando this
handleBlur(e, enteredBool) { if (e.currentTarget.value.trim() === '') { this[enteredBool] = false; //Change added } },y la forma en que lo pasas debería ser como
@blur="handleBlur($event, 'emailEntered')" //Added single quotesy
@blur="handleBlur($event, 'passwordEntered')" //Added single quotes