Javascript Alpine.js-显示输入字段，同时向其添加焦点

我有一个按钮，当用户单击它时，应该显示一个输入元素，它应该有焦点

我试过这个：

按钮

---

但它不起作用。

要在显示输入后立即将焦点放在输入上，需要使用Alpine的$nextTick函数。请尝试此稍加修改的代码版本：

<div x-data="{ show: false }">

    <input x-show="show" type="text" id="input" x-ref="input" />

    <button @click="show = !show; $nextTick(() => { $refs.input.focus(); });">Button</button>

</div>

按钮

---

下面是有关$nextTick的更多信息：

您确定alpine.js加载正确吗？因为我已经用alpine.js复制/粘贴了您的代码，并且它工作得很好。是的，我是。您可以查看此编辑器：当我单击按钮时，输入应该显示并具有焦点。对不起，我不知道不工作的部分是焦点。Craig E下面的答案是正确的（您也可以使用

setTimeout

），谢谢Craig E！