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