Tengo un botón que cambia la contraseña de **** a texto. Como tengo varios botones iguales, quería usar el mismo método para cambiar el valor booleano del botón según el argumento pasado.
<div class="input-wrapper" :class="{'error-field': isInvalidMe('a')}"> <input :type="asNewPassword ? 'password' : 'text'" v-model="adminNewPassword" class="input-text required" placeholder="New Password" required/> <span :class="{ 'brand-color': !asNewPassword, 'supportive-color-dark-2': asNewPassword }" :style="!asNewPassword ? {'color': primary + ' !important'} : {}" @click="togglePassword('asNewPassword')" > <i class="fa" :class="{'fa-eye-slash': asNewPassword, 'fa-eye': !asnewPassword}"/> </span> </div> togglePassword: function (typeOfPassword) { typeOfPassword = !typeOfPassword } asNewPassword: true,Se supone que togglePassword("asNewPassword") cambia su valor de falso a verdadero y viceversa, pero el método no parece funcionar. Intenté usar this.typeOfPassword pero tampoco me funciona.
Está pasando una cadena como valor a su método y luego tratando de tratarla como un valor booleano. Debe definir una propiedad en el estado local de sus componentes (función de datos) y luego alternar eso; Aquí está el código:
<div class="input-wrapper" :class="{'error-field': isInvalidMe('a')}"> <input :type="asNewPassword ? 'password' : 'text'" v-model="adminNewPassword" class="input-text required" placeholder="New Password" required/> <span :class="{ 'brand-color': !asNewPassword, 'supportive-color-dark-2': asNewPassword }" :style="!asNewPassword ? {'color': primary + ' !important'} : {}" @click="togglePassword" > <i class="fa" :class="{'fa-eye-slash': asNewPassword, 'fa-eye': !asnewPassword}"/> </span> </div> export default { data() { return { asNewPassword: true, }; }, methods: { togglePassword() { this.asNewPassword = !this.asNewPassword; }, }, }Reemplazar
@click="togglePassword('asNewPassword')"
Con
@click="asNewPassword = !asNewPassword"