b-form-input to show/hide password with v-bind:type-CodePudding

I use bootstrap.vue components. In my case "b-form-input". I want to hide and show the password by pressing the button appended to the input field. With a normal input-field it's working but with "b-fom-input" I can't get it to run. It did not work with "v-bind:type= ...". How can I solve it?

my code:

<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>

Update: This is the new code now: (function quick and dirty)

showPassword(){
  if (this.inputtype === "text") {
    this.inputtype = "password"
  }
  if (this.inputtype === "password") {
    this.inputtype = "text"
  }
  console.log("in show PW ... ")
},

HTML:

<b-input-group>
  <b-form-input :type="inputtype"
    :id="`type-${inputtype}`">
  </b-form-input>
  <b-input-group-append>
    <b-button @click="showPassword()"
      size="sm"
      variant="outline-success"
     >
        show
     </b-button>
    </b-input-group-append>
</b-input-group>

CodePudding user response：

Give a try to this

<script>
export default {
  data() {
    return {
        showPassword: false
     }
  }
}
</script>

<template>
  <div>
    Nice input <input :type="showPassword ? 'text' : 'password'">
    <button @click="showPassword = !showPassword">
      toggle it
    </button>
  </div>
</template>

Here is a working demo

UPDATE: here is bootstrap-vue setup with Nuxt2, fully functional: https://github.com/kissu/so-input-bootstrap/blob/main/pages/index.vue#L13