Привет, есть такая структура в шаблоне: <div class="label-wrapper" v-on:click="toggleMode">

Question

Привет, есть такая структура в шаблоне: <div class="label-wrapper" v-on:click="toggleMode">

<label class="checkbox-slider">
<input type="checkbox" class="check-input" name="checkbox">
<span class="checkbox-anim"></span>
<span class="checkbox__text">Active</span>
</label>
<div class="checkbox-slider__letter">A</div>
</div>
checkbox-anim — кастомный чекбокс, стили меняются в css.
Сейчас при клике на checkbox-slider__letter всё норм, но клик по самому чекбосу срабатывает дважды.
Если повесить клик на label (именно это и нужно), результат в точности такой же.
Модификатор .stop погоды не делает.
Модификатор .self срабатывает только если под курсором нет остальных элементов а только label-wrapper.
.prevent работает норм, но не меняет состояние чекбокса.
Почти как надо срабатывает только если повесить v-on:click на checkbox-anim, но это игнорирует клик по тексту Active.
Вопрос: почему оно срабатывает дважды и что сделать чтоб этого не было?

#frontend #javascript #programming #russian #vue.js

0

29.10.2019

1 ответов

13 просмотров

Evgeniy TN · Accepted Answer

Evgeniy TN

не нужно вешать на label или checkbox @click. Работай через v-model

0

29.10.2019

169 похожих чатов

Привет, есть такая структура в шаблоне: <div class="label-wrapper" v-on:click="toggleMode">

1 ответов

Похожие вопросы