<script>
    export default {
        data() {
            return {
                image: "src/assets/show.png",
                hidden: False,
                type: "text"
            }
        },

        methods: {
            change() {
                this.hidden = !this.hidden;
                if (this.hidden == False) {
                    this.image = "src/assets/show.png";
                    this.type = "text";
                } else {
                    this.image = "src/assets/hide.png";
                    this.type = "password";
                }
            }
        }
    }
</script>

<template>
    <div class="password-input">
        <div class="input-group mb-3">
            <input :type="type" value="1234" class="form-control">
                <button @click='change' class="btn btn-outline-secondary">
                <img :src="image">
            </button>
        </div>
    </div>
</template>


<style>
.password-input img {
    height: 24px;
}
</style>