I have a button that toggles the password from **** to text. Since I have multiple of the same buttons, I wanted to use the same method to change the boolean value of the button depending on the argument passed.
<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,
The togglePassword("asNewPassword") is suppose to change its value from false to true and vice versa but method does not seem to work. I've tried using this.typeOfPassword but it doesn't work for me as well.
You are passing a string as a value to your method and then trying to treat it as a Boolean value. You should define a property in your components local state (data function) and then toggle that; Here's the code:
<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;
},
},
}
Replace
@click="togglePassword('asNewPassword')"
With
@click="asNewPassword = !asNewPassword"