Is it possible to make a table from INPUTs in vue so that data can be edited?

Question

Vue.js

Getting familiar with vue.js. There is the following task:
An array of objects is given, which must be displayed in a table and immediately edit the data in different rows and cells. At the same time, so that the result of editing is saved back to an array of objects.
With pure js, I implemented this by bypassing the edited row of the table, searching for the desired object in the array and changing it.

But is it possible to simplify the solution with vue? If there was one line of inputs, then the solution is standard, but here I don’t know if vue will understand which input from the entire table is being edited and will it be able to automatically update the desired object in the array? Or to prescribe this logic by comparing the table row with the array index?

Answer 1

yes easily :

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>