Hoiw to show/hide current password is password input?

In vuejs 2.6 I have a form for password updating and I need in 3 password inputs by clicking
on right aligned button to show/hide current password is this input

Are there some tools decisions for such task?


This is very simple to implement. Let’s say we have an input and a corresponding button:

<input :type="inputType">
<div class="button show" @click="inputType = 'text'" v-show="inputType === 'password'"></div>
<div class="button hide" @click="inputType = 'password'" v-show="inputType === 'text'"></div>

Here you can see an input with an attribute “type” bound to component variable “inputType”. Below the input we have two buttons. One of them displays password and the second hides it. Only one of this buttons is displayed at a time. This is done in order to display different states of a button. You can just make one button and styles for it depending on the password display state, it doesn’t really matter.

If you are asking for an implemented component with this functionality - I don’t know, I created this one myself.

1 Like

a reactive property will do the work

A few things you should also consider when implementing this:

1 Like