VueJS - 表示为 2D 数组的 v-model 表

Question

I have a simple table and the data are represented as an Array or Array s:

[
["January",null,null,null],
["February",null,null,null],
["March",null,null,null],
["April",null,null,null],
["May",null,null,null],
["June",null,null,null],
["July",null,null,null],
["August",null,null,null],
["September",null,null,null],
["October",null,null,null],
["November",null,null,null],
["December",null,null,null]
]

I want to display this table and v-model every cell so the data.table is changed anytime a user change the table.

I was checking for some solutions like Hansontable but I think it's overkill. Is there some simple way to do that?

Answer 1

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>