[Vuejs]-Font awesome class icons toggling not working Vue

by

1👍

✅

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 class="fas fa-eye"></i>
    </span>
    <span v-else>
      <i class="fa-solid fa-eye-slash"></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>
👤Debug Diva

Leave a comment