Bootstrap Vue中b-form-input密码显示隐藏功能实现问题

问题分析 #

你更新后的JS方法存在逻辑错误：两个if语句顺序执行，无论初始inputtype是text还是password，最终都会被设置为text。比如：

• 若初始为text，第一个if将其改为password，紧接着第二个if又会把它改回text
• 若初始为password，第一个if不触发，第二个if直接改为text

这就导致密码切换功能完全失效。

正确实现代码 #

组件数据与方法

export default {
  data() {
    return {
      inputtype: 'password', // 默认密码输入类型
      showBtnText: '显示'     // 按钮初始文字
    }
  },
  methods: {
    showPassword() {
      // 切换输入框类型
      this.inputtype = this.inputtype === 'password' ? 'text' : 'password';
      // 同步切换按钮文字（可选优化）
      this.showBtnText = this.inputtype === 'password' ? '显示' : '隐藏';
    }
  }
}

模板部分

<b-input-group>
  <b-form-input 
    :type="inputtype" 
    placeholder="请输入密码"
  ></b-form-input>
  <b-input-group-append>
    <b-button 
      @click="showPassword" 
      size="sm" 
      variant="outline-success"
    >
      {{ showBtnText }}
    </b-button>
  </b-input-group-append>
</b-input-group>

说明 #

Bootstrap Vue的b-form-input完全支持动态绑定type属性，核心问题是之前的方法逻辑错误导致状态切换异常。上述代码通过三元表达式简洁实现类型切换，同时可选同步更新按钮文字，提升用户体验。

内容的提问来源于stack exchange，提问作者Ralf Bordé