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

【问题标题】：Vuejs FontAwesome eye icon to show and hide passwordVuejs FontAwesome 眼睛图标显示和隐藏密码
【发布时间】：2018-06-02 14:50:05
【问题描述】：

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

下面是我用于密码的 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>

非常感谢！

【问题讨论】：

您必须在类型密码和文本之间交换输入。 Something like this.

标签： javascript html vue.js passwords font-awesome

【解决方案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,},
    };

【讨论】：

【解决方案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"
              />
              <button
                @click="passwordType(passwordText)"
                class="btn btn-light"
                type="button"
                id="password-addon"
              >
                <i class="mdi mdi-eye-outline"></i>
              </button>
            </div>



<script>
    export default {
      data() {
        return {
          passwordText: "password",

      },

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

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

【讨论】：