b-form-input 使用 v-bind:type 显示/隐藏密码答案

【问题标题】：b-form-input to show/hide password with v-bind:typeb-form-input 使用 v-bind:type 显示/隐藏密码
【发布时间】：2022-10-18 16:06:01
【问题描述】：

我使用 bootstrap.vue 组件。在我的情况下是“b-form-input”。我想通过按下附加到输入字段的按钮来隐藏和显示密码。使用正常的输入字段它可以工作，但是使用“b-fom-input”我无法让它运行。它不适用于“v-bind:type= ...”。我该如何解决？

我的代码：

   <b-input-group>
        <input v-bind:type="[showPassword ? 'text' : 'password']">
        <b-input-group-append>
            <b-button @click="showPassword = !showPassword" size="sm" variant="outline-success">show</b-button>
        </b-input-group-append>
    </b-input-group>

【问题讨论】：

标签： javascript vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

试试这个

<input :type="showPassword ? 'text' : 'password'">

【讨论】：