Как добавить заполнитель для поля v-input в vuejs?
<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"
/>Ссылка из https://www.npmjs.com/package/@bachdgvn/vue-otp-input
У меня есть поле ввода otp, поэтому в середине каждого поля ввода я хочу разместить «-».
("-" предварительно заполняется в поле otp перед вводом otp)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Этот вариант еще не поддержан создателем.
Существует проблема с репозиторием git, открытым со 2 марта:
.
https://github.com/bachdgvn/vue-otp-input/issues/41
Я рекомендую вам создать свой собственный ввод или создать его вилку, чтобы сделать это самостоятельно.
Обходной путь - выбрать input компонента и установить 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 = '-')
},
},
}
Спасибо, что ответили на мой вопрос. После замены приведенного выше кода я получаю сообщение об ошибке (присвоение ошибки свойству параметра функции 'input' no-param-reassign)
Чтобы устранить ошибку, которую я поместил в метод "/ * eslint no-param-reassign:" error "* /" Теперь проблема в том, что вначале заполнитель не отображается (отображается только заполнитель, если я ввожу любую цифру , то только его отражение)
В демонстрации этого не происходит. Можно ссылку на репродукцию?
Любые другие альтернативные способы для размещения заполнителя. (С помощью css?)