How to bulk select cells in a table?

Question

Vue.js

Is it possible to write a similar handler like here (taken from another question) only in vue.js?
https://jsfiddle.net/nlynx/umqpeys6/

Answer 1

Option times - remember the selected cells:

data: () => ({
  selected: [],
}),
methods: {
  key: (x, y) => `${y}.${x}`,
  select({ buttons, target: { dataset: { key } } }) {
    if (buttons) {
      const index = this.selected.indexOf(key);
      if (index !== -1) {
        this.selected.splice(index, 1);
      } else {
        this.selected.push(key);
      }
    }
  },
},

<table>
  <tr v-for="y in 10">
    <td
      v-for="x in 10"
      @mousedown="select"
      @mouseover="select"
      :data-key="key(x, y)"
      :class="{ selected: selected.includes(key(x, y)) }"
    >{{ key(x, y) }}</td>
  </tr>
</table>

Option two - store the states of all cells:

data: () => ({
  items: [...Array(10)].map(() => Array(10).fill(false)),
}),
methods: {
  select(row, index, e) {
    if (e.buttons) {
      this.$set(row, index, !row[index]);
    }
  },
},

<table>
  <tr v-for="(row, y) in items">
    <td
      v-for="(cell, x) in row"
      @mousedown="select(row, x, $event)"
      @mouseover="select(row, x, $event)"
      :class="{ selected: cell }"
    >{{ y + 1 }}.{{ x + 1 }}</td>
  </tr>
</table>