[Vuejs]-Vuejs FontAwesome eye icon to show and hide password

0👍

Better way to do that, install this
npm add vue-password
The VuePassword component adds support for a toggle to hide and show the
password as well as a meter to show the current strength of the password. And the strength ranges from 0 to 4.

<VuePassword
   v-model="password1"
   id="password1"
   :strength="strength"
   type="password"
 />



 import VuePassword from 'vue-password';
    export default {
      components: {VuePassword,},
    };

0👍

                <div class="input-group auth-pass-inputgroup">
              <input
                v-model="password"
                :type="passwordText"
                class="form-control"
                placeholder=""
                aria-label="Password"
                aria-describedby="password-addon"
              />
              <a @click="passwordType(passwordText)"
                type="button" class="mdi mdi-eye-outline"></a>
            </div>
<script>
    export default {
      data() {
        return {
          passwordText: "password",
      },

      methods: {
       passwordType(passwordText) {
        this.passwordText = passwordText == "password" ? "text" : "password";
       },
      },
    };
</script>

A solution I implemented for myself. you can apply this for yourself.

Leave a comment