Vuejs FontAwesome 眼睛图标显示和隐藏密码

Question

我正在尝试使用字体真棒眼睛图标在用户尝试登录时显示和隐藏密码。图标确实显示，但我无法显示输入的字符。有人可以帮助我吗？

下面是我用于密码的 html 代码。您可以在 v-show 和 @click 函数中看到的密码是 javascript 中的空字符串。

如果有人能帮助我完成这项工作，我将非常感激。

HTML：

<div class="passwordInputArea">
                        <span class="passwordEye" v-show="password">
                           <span><font-awesome-icon :icon="['fas', 'eye']" @click="password = !password" /></span>
                        </span>

                        <input name="password" type="password" v-model="password" v-validate="'required'" placeholder="Password" class="epForm epInput pSection" id="password" />
                        <p v-show="wrong.password">
                            Password is missing or incorrect. Please try again!
                        </p>
                        <p v-show="wrong.all">
                            Login Details Incorrect!
                        </p>
                    </div>

非常感谢！

Answer 1

更好的方法，安装这个

npm add vue-password

VuePassword 组件添加了对隐藏和显示切换的支持 密码以及显示密码当前强度的仪表。强度范围从0到4。

<VuePassword
   v-model="password1"
   id="password1"
   :strength="strength"
   type="password"
 />



 import VuePassword from 'vue-password';
    export default {
      components: {VuePassword,},
    };

Answer 2

                <div class="input-group auth-pass-inputgroup">
              <input
                v-model="password"
                :type="passwordText"
                class="form-control"
                placeholder=""
                aria-label="Password"
                aria-describedby="password-addon"
              />
              <a @click="passwordType(passwordText)"
                type="button" class="mdi mdi-eye-outline"></a>
            </div>
<script>
    export default {
      data() {
        return {
          passwordText: "password",
      },

      methods: {
       passwordType(passwordText) {
        this.passwordText = passwordText == "password" ? "text" : "password";
       },
      },
    };
</script>

我自己实施的解决方案。您可以自己申请。