@kimqarkimqarkimqar

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

Есть вёрстка:
<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');
    })
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Можно директиву сделать:

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'">
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега Vue.js
Thinking about a11y
Вам вообще не нужен там какой-то класс. В вашем случае достаточно использовать :focus-within
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы