Using `b-form-input` to toggle the visibility of the password using `v-bind:type`

Question

Using `b-form-input` to toggle the visibility of the password using `v-bind:type`

Utilizing bootstrap.vue components, specifically "b-form-input", I am trying to implement a feature to hide and show the password by clicking the button attached to the input field. While this functionality works with a regular input field, I am facing challenges when using it with "b-form-input". The approach of using "v-bind:type=..." did not yield the desired results. How can I tackle this issue?

https://i.sstatic.net/NY9oW.png

https://i.sstatic.net/QEALZ.png

This is my current 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: Below is the updated code (quick and dirty implementation):

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>

javascript vue.js bootstrap-4 bootstrap-vue

Answer 1

Answer №1

Check out this code snippet

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

<template>
  <div>
    Awesome input <input :type="displayPassword ? 'text' : 'password'">
    <button @click="displayPassword = !displayPassword">
      Toggle it
    </button>
  </div>
</template>

For a live demonstration

UPDATE: If you are using Nuxt2 with bootstrap-vue, here is the setup you need: https://github.com/kissu/so-input-bootstrap/blob/main/pages/index.vue#L13

Answer 2

Check out this code snippet

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

<template>
  <div>
    Awesome input <input :type="displayPassword ? 'text' : 'password'">
    <button @click="displayPassword = !displayPassword">
      Toggle it
    </button>
  </div>
</template>

For a live demonstration

UPDATE: If you are using Nuxt2 with bootstrap-vue, here is the setup you need: https://github.com/kissu/so-input-bootstrap/blob/main/pages/index.vue#L13

Using `b-form-input` to toggle the visibility of the password using `v-bind:type`

Answer №1

Similar questions

The md-select search filter currently functions according to the ng-value, but it is important for it to also

What do cross-domain requests, cross-domain attacks, and cross-domain protocols entail?

Regex produces odd results in string processing

Using Selenium Web Driver to extract information from Google's knowledge graph

Sticky positioning with varying column widths

Connect Bootstrap Tabs to a pagination system (Backward Forward)

What is the best way to create a regex pattern that can effectively split two consecutive mathematical operators ("/-", "*-") from a given string equation?

Determining the query count in a MongoDB collection using Node.js

Having trouble sending HTTP requests in Angular 6

Unable to transmit the checked value to the parent component from a custom checkbox component

How to fetch files using URL in JavaScript

How to display the total of specific values on the screen using React

What is the best way to notify administrator users when their accounts have exceeded the timeout period?

What is the purpose of uploading the TypeScript declaration file to DefinitelyTyped for a JavaScript library?

Tips for creating curved Extjs area and line charts with a gentle radius to soften the sharp curves

Importing a JSON file into a JavaScript script

"Utilizing an if-else statement within a forEach loop

exploring the realm of creating constants in AngularJS functions

What is the best approach to removing a component by utilizing the children prop in React?

Adjust the size of the div to fit its content while maintaining the transition animation