Можно ли сделать таблицу из INPUT-ов во vue, чтобы можно было редактировать данные?

Question

[Алексей Беспалов]

Разбираюсь с vue.js. Есть следующая задача:
Дан массив объектов, который нужно вывести в таблицу и тут же редактировать данные в разных строках и ячейках. При этом, чтобы результат редактирования сохранялся обратно в массив объектов.
Чистым js я такое реализовал с обходом редактируемой строки таблицы, поиском в массиве нужного объекта и изменения его.

Но можно ли упростить решение с помощью vue? Если бы была одна строка инпутов, то решение стандартное, а тут я не знаю, поймет-ли vue какой инпут из всей таблицы редактируется и сможет-ли автоматом обновить нужный объект в массиве? Или эту логику самому прописывать сопоставляя строку таблицы с индексом массива?

Answer 1

[0xD34F]

да запросто:

data: () => ({
  items: [
    { раз_свойство: '', два_свойство: '', три_свойство: '', ... },
    ...
  ],
}),

<table>
  <tbody>
    <tr v-for="(n, i) in items">
      <td>#{{ i + 1 }}</td>
      <td v-for="(v, k) in n">
        {{ k }}:
        <input v-model="n[k]">
      </td>
    </tr>
  </tbody>
</table>

Comments

[Алексей Беспалов]

Класс! Спасибо!

[Businka76]

а как поймать событие что строка изменилась?