@FreeArcher
Senior 1С; php, JS Starter

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

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

Но можно ли упростить решение с помощью vue? Если бы была одна строка инпутов, то решение стандартное, а тут я не знаю, поймет-ли vue какой инпут из всей таблицы редактируется и сможет-ли автоматом обновить нужный объект в массиве? Или эту логику самому прописывать сопоставляя строку таблицы с индексом массива?
  • Вопрос задан
  • 746 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
да запросто:

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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы