VueJS как добавлять класс активному элементу в разных родителях?

Question

[kimqarkimqarkimqar]

Есть вёрстка:

<div class="buy-voucher__amounts">
              <div class="buy-voucher-choose buy-voucher__amount" v-for="(item,key) in vouchers" @click="changeVoucher(item.id)"><span class="buy-voucher__amount-text">£{{item.value}}</span></div>
 </div>

<div class="buy-voucher__amounts">
               <input class="buy-voucher__custom-input" id="value-custom__voucher" @click="changeVoucherCustom" v-on:input="changeVoucherCustom" v-model="CustomVoucherCount">
</div>

При клике на input во втором родителе или в первом родителе на блок с классом buy-voucher-choose должен добавляться активному элементу класс buy-voucher__amount_selected, как это сделать?
Сделал на jquery, но хочу перевести во vue, не получается

$('#value-custom__voucher').click( function () {
        $('.buy-voucher__amount_selected').removeClass('buy-voucher__amount_selected');
        $(this).addClass('buy-voucher__amount_selected');
    })

    $('.buy-voucher-choose').click( function () {
        $('.buy-voucher__amount_selected').removeClass('buy-voucher__amount_selected');
        $(this).addClass('buy-voucher__amount_selected');
    })

Comments

[Alex]

А зачем вам там Класс?

[kimqarkimqarkimqar]

Alex, чтобы подсвечивать визуально выбранный элемент

Answer 1

[0xD34F]

Можно директиву сделать:

function onClick({ currentTarget: t }) {
  const className = t.dataset.activeClass;
  document.querySelector(`.${className}`)?.classList.remove(className);
  t.classList.add(className);
}

Vue.directive('active-class', {
  bind(el, binding) {
    el.dataset.activeClass = binding.value;
    el.addEventListener('click', onClick);
  },
  update(el, binding) {
    el.dataset.activeClass = binding.value;
  },
  unbind(el) {
    delete el.dataset.activeClass;
    el.removeEventListener('click', onClick);
  },
});

<div v-active-class="'buy-voucher__amount_selected'">
<input v-active-class="'buy-voucher__amount_selected'">

Answer 2

[Alex]

Вам вообще не нужен там какой-то класс. В вашем случае достаточно использовать :focus-within

Comments

[kimqarkimqarkimqar]

:focus-within исчезает, если кликнуть на любой другой элемент

[kimqarkimqarkimqar]

вот так подсвечивается выбранный элемент

[Alex]

kimqarkimqarkimqar, Ну, судя по макету, вверху это набор input:radio. Значит нужно просто стилизовать выбранный инпут. Либо чуть сложнее: выводить активный класс, там где значение инпута соответствует значению в data.