So I am working on the signup form using Vue.js and there is this password part that I want the user to view password and toggle back to unseen password I have both font awesome icons (fas fa-eye and fa-solid fa-eye-slash) but the state only remains the same even after toggling see the password. I tried with text options SEE and HIDE and it worked but the icons are not

My Code :

     <div >
                        <div >
                            <div @click="viewPassword()">
                                <span v-if="showPassword !== true">
                                    <i ></i>
                                    SEE
                                </span>
                                <span v-else>
                                    <i ></i>
                                    HIDE
                                </span>
                            </div>
                            <input
                                :type="showPassword ? 'text' : 'password'"
                                :placeholder="$t('common.PASSWORD')"
                                data-cy="walletPassword"
                                name="walletPassword"
                                v-model="walletPassword"
                                autocomplete="off"
                            />
                        </div>
                    </div>

Functional code

export default class Login extends mixins(Global, Recaptcha) {
    // Component properties
    walletEmail = '';
    walletPassword = '';
    showRecovery = false;
    logonError = '';
    showPassword = false;
    
    viewPassword() {
        this.showPassword = !this.showPassword;
    }
}

CodePudding user response：

Observations :

• Dynamic :type assignment will give compiling template error. Hence, will suggest to use v-if/v-else clause.

• Just to make it clean, You can use v-if="!showPassword" instead of v-if="showPassword !== true".

Live Demo :

new Vue({
  el: '#app',
  data: {
    showPassword: false,
    walletPassword: null
  },
  methods: {
    viewPassword() {
      this.showPassword = !this.showPassword;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
<div id="app">
  <div @click="viewPassword()">
    <span v-if="!showPassword">
      <i ></i>
    </span>
    <span v-else>
      <i ></i>
    </span>
  </div>
  <input v-if="showPassword" type="text" name="walletPassword" v-model="walletPassword" autocomplete="off"/>
  <input v-else type="password" name="walletPassword" v-model="walletPassword" autocomplete="off"/>
</div>