How to add placeholder for v-input-field in vuejs?

Question

 <input class="otp-number-login" 
                         input-classes="otp-number-login" type="password" placeholder="-" />
                        <input class="otp-number-login" 
                        input-classes="otp-number-login"  type="password" placeholder="-" />
                        <input class="otp-number-login"
                         input-classes="otp-number-login"  type="password" placeholder="-" />
                        <input class="otp-number-login"
                         input-classes="otp-number-login" type="password" placeholder="-" />

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

Reference from https://www.npmjs.com/package/@bachdgvn/vue-otp-input

I am having otp input field, So in the middle of each input field, I want place "-".

("-" is prefilled in otp field,before entering otp )

tony19 · Accepted Answer · 2021-04-04 04:19:17Z

1

A workaround is to select the component's inputs, and set the placeholder:

export default {
  async mounted() {
    await this.$nextTick()
    this.setInputPlaceholder()
  },
  updated() {
    // also apply placeholder in `updated()` in case component gets re-rendered
    this.setInputPlaceholder()
  },
  methods: {
    setInputPlaceholder() {
      this.$refs.otpInput.$el
        .querySelectorAll('input')
        .forEach(input => input.placeholder = '-')
    },
  },
}

demo

answered Apr 4, 2021 at 4:19

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

T dhanunjay Over a year ago

Thanks for answering my question. After replacing the above code, i am getting error as (error Assignment to property of function parameter 'input' no-param-reassign)

T dhanunjay Over a year ago

In order to clear the error i have placed in the method "/*eslint no-param-reassign: "error"*/" Now the issue is, At the beginning, placeholder is not showing(Only showing placeholder if i enter any digit, then only its reflecting)

tony19 Over a year ago

That doesn't occur in the demo. Can you link to a reproduction?

T dhanunjay Over a year ago

Yes in the demo, it's working fine, but in my local when adding above code, In console i am getting as(((((( "TypeError: Cannot read property '$el' of undefined"

T dhanunjay Over a year ago

I am thinking because of this, initially placeholder is not reflecting. Can you please check if anything to be added

|

6be709c0 · Accepted Answer · 2021-04-03 10:18:46Z

0

This option has not been supported by the creator yet.

There is an issue on the git repo open since March 2:
https://github.com/bachdgvn/vue-otp-input/issues/41

answered Apr 3, 2021 at 10:18

6be709c0

8,5014 gold badges40 silver badges53 bronze badges

2 Comments

T dhanunjay Over a year ago

Any other alternative ways, For placing the placeholder.(With css?)

6be709c0 Over a year ago

I recommend that you create your own input or fork this input to do it on your own.

Collectives™ on Stack Overflow

How to add placeholder for v-input-field in vuejs?

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related