Showing and Hiding Password in Vue.js

Hi. In this article, I’ll tell of how you can show and hide password in Vue.js.

Create an HTML Element

Create an HTML element like that to initialize Vue.


{{ btnText }}

Initializing Vue Instance

We have two data attributes. The type attribute will use for the input element’s type. It will change when we click the button. Just a string.

The second attribute will use for the button’s text. The text will change when we click the button.

The button has an attribute called click and its value is showPassword().

var app = new Vue({
    el: ‘#app’,
    data: {
        type: ‘password’,
        btnText: ‘Show Password’
    },
    methods: {
        showPassword() {
            if(this.type === ‘password’) {
                this.type = ‘text’
                this.btnText = ‘Hide Password’
            } else {
                this.type = ‘password’
                this.btnText = ‘Show Password’
            }
        }
    }
})

The input’s type will change when you click the button. There is an example on CodePen.

That’s all. This is a basic example for the Vue.js.

I hope this article will help you.

Thanks for reading.