Show/Hide password in VueJS (Bootstrap, FontAwesome)

PasswordField.vue

<template>
    <div class="form-inline">
        <div v-if="!passwordHidden">
            <label>
                <span class="strong-label">{{ fieldLabel }}</span>
                <input type="text" class="password-field form-control d-inline" v-model="passwordText" />
                <span class="display-eye fa fa-eye-slash" @click="hidePassword"></span>
            </label>
        </div>
        <div v-if="passwordHidden">
            <label>
                <span class="strong-label">{{ fieldLabel }}</span>
                <input type="password" class="password-field form-control d-inline" v-model="passwordText" />
                <span class="display-eye fa fa-eye" @click="showPassword"></span>
            </label>
        </div>
    </div>
</template>
<style scoped>
    input {
        margin-right: -30px;
        padding-right: 35px;
    }

    .strong-label {
        margin-right: 10px;
        font-weight: 900;
    }

    .display-eye {
        cursor:pointer;
    }
</style>
<script>
    export default {
        props: {
            passwordText: {
                default: "",
                type: String
            },
            fieldLabel: {
                default: "",
                type: String
            }
        },
        data () {
            return {
                passwordHidden: {
                    default: false,
                    type: Boolean
                }
            }
        },
        methods: {
            hidePassword() {
                this.passwordHidden = true;
            },
            showPassword() {
                this.passwordHidden = false;
            }
        }
    };
</script>

You can simply switch the "type" of your input between text and password, it works with less code ;)

Perfect! Very good! Simple, practical and efficient! Congratulations! ;-)

You can simply switch the "type" of your input between text and password, it works with less code ;)

I agree, would probably do something like this instead using Composition API and normal bootstrap. (Note this may not work, check out "https://getbootstrap.com/docs/5.0/forms/input-group/" for more information on how to set an input form correctly):

<template>
   <div>
     <label for="inputPassword" class="form-label">{{ fieldLabel }}</label>
     <input id="inputPassword" :type="passwordHidden ? 'password' : 'text'" class="form-control" v-model="passwordText" />
     <i class="fa-solid" :class="passwordHidden ? 'fa-eye' : 'fa-eye-slash'" @click="passwordHidden = !passwordHidden "></i>
  </div>
</template>

<script setup>
import { ref } from "vue";

// I prefer getting props like this than what's proposed here: https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits
const props = defineProps({
  passwordText: { type: String, default: "" },
  fieldLabel: { type: String, default: "" }
})
const { passwordText, fieldLabel } = toRefs(props)

const passwordHidden = ref(true);

</script>

<style scoped>
  .display-eye {
      cursor:pointer;
  }
</style>