[Vuejs]-VueJS – v-model table represented as 2D Array

0👍

You can make it in this way.
Just add v-model directive when generating a table.

<table style="width: 100%">
    <tr>
      <th>month</th>
      <th>some</th>
      <th>some</th>
      <th>some</th>
    </tr>
    <template v-for="(el, i) in array">
      <tr :key="i">
        <td>
          <input type="text" placeholder="input text" v-model="el[0]" />
        </td>
        <td>
          <input type="text" placeholder="input text" v-model="el[1]" />
        </td>
        <td>
          <input type="text" placeholder="input text" v-model="el[2]" />
        </td>
        <td>
          <input type="text" placeholder="input text" v-model="el[3]" />
        </td>
      </tr>
    </template>

    <!-- rows for test -->
    <template v-for="(el, i) in array">
      <tr :key="i">
        <td>
          {{ el[0] }}
        </td>
        <td>
          {{ el[1] }}
        </td>
        <td>
          {{ el[2] }}
        </td>
        <td>
          {{ el[3] }}
        </td>
      </tr>
    </template>
  </table>

Leave a comment