pk7HgfC5

1<script>
2    export default {
3        data() {
4            return {
5                image: "src/assets/show.png",
6                hidden: False,
7                type: "text"
8            }
9        },
10
11        methods: {
12            change() {
13                this.hidden = !this.hidden;
14                if (this.hidden == False) {
15                    this.image = "src/assets/show.png";
16                    this.type = "text";
17                } else {
18                    this.image = "src/assets/hide.png";
19                    this.type = "password";
20                }
21            }
22        }
23    }
24</script>
25
26<template>
27    <div class="password-input">
28        <div class="input-group mb-3">          
29            <input :type="type" value="1234" class="form-control">
30                <button @click='change' class="btn btn-outline-secondary">
31                <img :src="image">
32            </button>
33        </div>
34    </div>
35</template>
36
37
38<style>
39.password-input img {
40    height: 24px;
41}
42</style>
43