AlpineJS - 当有多个待办事项时，自动选择不起作用答案

【问题标题】：AlpineJS - autoselection doesn't work when there is more than one todoAlpineJS - 当有多个待办事项时，自动选择不起作用
【发布时间】：2020-05-04 22:33:27
【问题描述】：

我正在AlpineJS 中制作一个小待办事项应用程序，当用户单击待办事项时，我遇到了自动选择 字段的问题。仅当有多个待办事项时才会出现此问题。

当用户在应用程序中输入第一个待办事项时，他们可以点击该待办事项进行编辑。该字段将按预期自动选择。但是，当用户在应用中添加多个待办事项并想要编辑 n+1 个待办事项时，该字段将不再自动选择，但第一个待办事项仍然可以自动选择。

这是我的CodePen 供您参考。

这是我的 edit 功能的样子：

[...]
edit(todo) {
    todo.editing = !todo.editing
    this.$nextTick(() => {
      document.getElementById(`edit-${todo.id}`).select()
    })
  }
[...]

HTML

[...]
<div
  x-text="todo.item"
  class="todo-item"
  @click="edit(todo)" // <-- point of interest
  x-show="!todo.editing"
  :class="{ 'completed' : todo.completed }"
  >
</div>

<input
  type="text"
  x-show="todo.editing"
  :value="todo.item"
  x-model="todo.item"
  @keydown.enter="edit(todo)"
  @keydown.escape="todo.editing = false"
  @click.away="todo.editing = false"
  class="edit-input"
  :id="`edit-${todo.id}`" // <-- point of interest
/>
[...]

有人知道我的逻辑可能有什么问题吗？感谢您的帮助！

【问题讨论】：

标签： alpine.js

【解决方案1】：

似乎使用setTimeout(() => { ... }, 1)（超时1ms）有效，请参阅您修改的以下Codepen。

$nextTick 附近的 Alpine.js 中存在已知问题。

我还建议使用x-ref 而不是ids，这样您的输入将如下所示：

<input
  type="text"
  x-show="todo.editing"
  :value="todo.item"
  x-model="todo.item"
  @keydown.enter="edit(todo)"
  @keydown.escape="todo.editing = false"
  @click.away="todo.editing = false"
  class="edit-input"
  :x-ref="`edit-${todo.id}`"
/>

然后您可以将edit(todo) 设置为：

  edit(todo) {
    todo.editing = !todo.editing
    setTimeout(() => {
      this.$refs[`edit-${todo.id}`].select()
    }, 1)
  }

【讨论】：