Как в ряду чекбоксов устанавливать checked только до того чекбокса, который был кликнут?

Question

[Александр]

Есть ряд чекбоксов. К примеру 10.
Хочу сделать так, чтобы при клике, например, на пятый чекбокс в ряду, все предыдущие (1-4) тоже стали checked.
Если дальше чекнуть, допустим, седьмой, то к первым пяти чекнутым добавится и седьмой и шестой.
Далее, если в ряду чекнутых снять один чек (допустим четвертый), то все после него (5,6,7) так же снимут выделение. Соответственно если в ряду чекнутых снять самый первый чекбокс, то все потеряют статус checked.

Я подумал пару дней. Пришел к логике: поместить инпуты-чекбоксы в переменные. Переменные - в массив. При чеке инпут отправляет свое Value (содержащее порядковый int). Это значение попадает в цикл, в котором значение является краем для постановки Checked (индексом для массива).
А вот как снимать "чеки" после "анчекнутого" я пока не додумал.

Answer 1

[0xD34F]

data: () => ({
  checkedCount: 0,
}),

<div v-for="i in 10">
  <label>
    <input
      type="checkbox"
      :checked="i <= checkedCount"
      @change="checkedCount = checkedCount < i ? i : i - 1"
    >
    {{ 2 ** i }}
  </label>
</div>