Как выделять чекбоксы зажатием на vue.js?

Question

[Евгений Ромашкан]

Вот пример на чистом js:
https://codepen.io/anon/pen/xjroxX?editors=0010
Как можно прикрутить это дело в vue, или как средствами vue подобное реализовать?
Про v-model знаю, но чекбокы создаются в цикле, и для каждого генерировать модель мне кажется не вариант.

Comments

[Алексей Ярков]

Сделайте ваш пример с Vue в песочнице. Так быстрее помогут.

Answer 1

[0xD34F]

Как можно прикрутить это дело в vue, или как средствами vue подобное реализовать?

Варианты разные есть - вы бы рассказали, для чего вам такое надо.
Если совсем в лоб, то

methods: {
  onMouseOver(e) {
    if (e.buttons) {
      e.target.checked = !e.target.checked;
    }
  },
},

<input
  type="checkbox"
  v-for="i in 3000"
  @mouseover="onMouseOver"
>

для каждого генерировать модель мне кажется не вариант

Вполне себе вариант:

data: () => ({
  checkboxes: Array(3000).fill(false),
}),
methods: {
  onMouseOver(e, index) {
    if (e.buttons) {
      this.$set(this.checkboxes, index, !this.checkboxes[index]);
    }
  },
},

<input
  type="checkbox"
  v-for="(n, i) in checkboxes"
  v-model="checkboxes[i]"
  @mouseover="onMouseOver($event, i)"
>

Работать, правда, будет заметно медленнее, чем без v-model (если чекбоксов много).

Comments

[Евгений Ромашкан]

В том то и дело, что чекбоксов вполне может быть много

[Евгений Ромашкан]

Да. Ваше решение, что "в лоб", это то что нужно. Спасибо большое. Я не понял сам как можно передать элемент в функцию в vue.