[Vuejs]-How to make <v-otp-input> field to hide in vuejs?

0πŸ‘

βœ…

In order to "hide" the user input behind * characters you need to change the input "type" attribute. A quick look into the documentation for the package you provided showed it can receive a prop input-type. If you pass "password" to this prop it should display the entered digits as * characters.

Like so:

    <v-otp-input
      ref="otpInput"
      input-classes="otp-input"
      separator="-"
      :num-inputs="4"
      :should-auto-focus="true"
      :is-input-num="true"
      input-type="password" // add this prop
      @on-change="handleOnChange"
      @on-complete="handleOnComplete"
    />

Leave a comment