Как во vue добавить класс родителю, если input radio или ckebox checked?

Question

[aftar]

Доброй ночи!
Подскажите пожалуйста как при такой структуре добавлять родителю (li или label) класс active, если радио кнопка или чекбокс активны?

<ol>
  <li class="list">
    <label>
      <input type="radio" value="category1" name="type" /><span>1</span>
    </label>
  </li>
  <li class="list">
    <label>
      <input type="radio" value="category2" name="type" /><span>2 </span>
    </label>
  </li>
</ol>

Заранее спасибо!

Answer 1

[Andrey Vasilev]

Ставишь при активации чекбокса выполняешь метод, в который передашь, например category2, далее присваиваешь какому-либо значению из data переданное значение. Далее пишешь на Li - :class="{'active': value === 'categoty2' } ".
А вообще лучше создай объект с этими данными, выводи их в цикле и проблем станет в разы меньше, они все равно имею одинаковую структуру

Comments

[aftar]

Я объект циклом и вывожу, посмотри на code pen в описании

[Andrey Vasilev]

aftar, https://codepen.io/Nolis/pen/mdOVWXW

[Andrey Vasilev]

aftar, можно это все вынести в метод чтобы разметку не грузить

[aftar]

Andrey Vasilev, спасибо. что откликнулись.
есть еще проблема с чекбоксами, если отметить еще один, то у предыдущего пропадает класс.
и если вернуться на шаг назад, то у элемента пропал класс.
смысл, скрыть инпуты и подсвечивать, если активны, за счет класса.

поправил с вашим предложением решения
https://codepen.io/aftar/pen/WNorxyR

[Andrey Vasilev]

aftar, тогда тут нужно создавать массив и туда класть данные по определенному условию. логика в принципе такая же. Нажимаешь на чекбокс - выполняется метод куда летят какие-нибудь данные уникальные для этого чекбокса и отправляются в массив. Далее, если требуется "отнажать" чекбокс нужно прописать условие: если элемент содержится - отфильтровать массив без него.
соответсвенно там где сейчас будет :class="{'active': valuesArray.includes(value)}".
valuesArray - массив всех значений, которые выбраны
value - уникальное значение для каждого чекбокса
то есть мы подставляем класс active, только если в массиве значений содержится уникальное значение

[aftar]

Andrey Vasilev, ок, спасибо! буду пробовать