Alpine JS - автоматический выбор не работает при наличии нескольких задач - PullRequest
Новая
       13

Alpine JS - автоматический выбор не работает при наличии нескольких задач

0 голосов
/ 09 марта 2020

Я создаю небольшое приложение todo в Alpine JS и сталкиваюсь с проблемой автоматического выбора поля, когда пользователь нажимает на todo. Эта проблема возникает только при наличии нескольких задач.

Когда пользователь вводит первую задачу в приложение, он может затем щелкнуть эту задачу, чтобы отредактировать ее. Поле будет автоматически выбирать , как и ожидалось. Однако, когда пользователь добавляет в приложение более одной задачи и хочет отредактировать задачу n + 1 , поле больше не будет автоматически выбирать, но первая задача все равно будет автоматически выбираться.

Вот мой CodePen для справки.

Вот как выглядит моя edit функциональность:

JS

[...]
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
/>
[...]

Кто-нибудь может понять, что может быть не так с моей логикой c? Спасибо за помощь!

1 Ответ

0 голосов
/ 04 мая 2020

Кажется, что использование setTimeout(() => { ... }, 1) (время ожидания 1 мс) работает, см. Codepen , модифицированный по вашему.

В Alpine есть известные проблемы. js вокруг $nextTick .

Я бы также рекомендовал использовать x-ref вместо id s, чтобы ваш ввод выглядел следующим образом: 

<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)
  }
...