Блог

У меня есть простая таблица, и данные представлены Array в виде Array или:

 [
["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]
]
 

Я хочу отобразить эту таблицу и v-model каждую ячейку, чтобы data.table она изменялась в любое время, когда пользователь изменяет таблицу.

Я проверял некоторые решения, такие как Hansontable , но я думаю, что это излишне. Есть ли какой-нибудь простой способ сделать это?

Вы можете сделать это таким образом.
Просто добавьте v-model директиву при создании таблицы.

 <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>