Alpine.js — отображение поля ввода и одновременное добавление к нему фокуса

У меня есть кнопка, и когда пользователь нажимает на нее, должен отображаться элемент ввода, и он должен иметь фокус.

Я пробовал это:

<div x-data=»{ show: false }»> <input x-show=»show» type=»text» id=»input» x-ref=»input» /> <button @click=»show = !show; $refs.input.focus();»>Button</button> </div>

Но это не работает.

Вы уверены, что alpine.js загружается правильно? Потому что я скопировал / вставил ваш код в скрипт с alpine.js, и он работает нормально   —  person Jeroen van Rensen    schedule 11.05.2021

Да, я. Вы можете проверить этот редактор: w3schools.com/code/tryit.asp?filename = GQEY8EWSLJHB Когда я нажимаю кнопку, ввод должен отображаться и иметь фокус   —  person Jeroen van Rensen    schedule 11.05.2021

Извините, я не понял, что основное внимание было уделено неработающей части. Ответ Craig E ниже правильный (вы также можете использовать setTimeout)   —  person Jeroen van Rensen    schedule 12.05.2021

Источник: ledsshop.ru

Стиль жизни - Здоровье!