Почему не срабатывает событие @click?

Question

[nastya_zholudeva]

Событие select_list_currentClick(e) должно переключать класс `open` для того, чтобы появлялся селект как справа на скрине

Но оно почему-то срабатывает очень редко, приходится несколько раз перезагружать страницу, хотя мое приложение вообще без перезагрузки должно работать... Такие селекты у меня на каждой странице, поэтому даже если при перезагрузке удалось на первой страницы навешать класс и селект сработал, то при переходе на другую страницу уже ничего не работает. Хотя он у меня подключен одним компонентом к обоим этим страницам

Верстка

<div class="selected_relative">
                    <div class="select_list_wrapper">
                        <div class="select_list_current" @click="select_list_currentClick($event)">
                            <span class="label">Сортировать:</span>
                            <span class="select_list_current_item">По популярности</span>
                        </div>
                        <div class="select_list">
                            <div class="select_list_radio"><input type="radio" id="by_popular" name="sort_list" checked><label for="by_popular"><span>По популярности</span> </label></div>
                            <div class="select_list_radio"><input type="radio" id="by_price" name="sort_list"><label for="by_price"><span>По цене</span> </label></div>
                            <div class="select_list_radio"><input type="radio" id="by_date" name="sort_list"><label for="by_date"><span>По новизне</span> </label></div>
                        </div>
                    </div>
                </div>

событие

select_list_currentClick(e) {
                    var $this = $(e.target);
                    if(this.$route.name !== 'fhgkgkjg') {
                        $this.parent('.select_list_wrapper').toggleClass('open');
                        $this.parent().find('.select_list').slideDown("slow");
                    }

            },

P. S. эту абракадабру this.$route.name !== 'fhgkgkjg' прилепила в надежде, что это заставит код при изменении маршрута навешивать класс:(

Comments

[Антон]

Такие селекты у меня на каждой странице, поэтому даже если при перезагрузке удалось на первой страницы навешать класс и селект сработал, то при переходе на другую страницу уже ничего не работает.

Так Вы пишите в локалсторейдж значения, открыто или нет

Answer 1

[Артур Борденюк]

Почему бы не отказаться от jQuery ? Vue предлагает клёвое, реактивное решение.

Вот простой пример.

Comments

[nastya_zholudeva]

Артур, спасибо большое, это очень помогло. Подскажите пожалуйста, а как мне поступить если таких селектов с такими классами несколько. Потому что, если я навешиваю свое событие на каждый из них, то при нажатии на один, второй тоже появляется

<div class="selected_pop">
                <div class="selected_relative">
                    <div class="select_list_wrapper" :class="{open: sortListOpened}">
                        <div class="select_list_current" @click="select_list_currentClick($event)">
                            <span class="label">Сортировать:</span>
                            <span class="select_list_current_item">По популярности</span>
                        </div>
                        <div class="select_list">
                            <div class="select_list_radio" @click="select_list_radioClick($event)"><input type="radio" id="by_popular" name="sort_list" checked><label for="by_popular"><span>По популярности</span> </label></div>
                            <div class="select_list_radio" @click="select_list_radioClick($event)"><input type="radio" id="by_price" name="sort_list"><label for="by_price"><span>По цене</span> </label></div>
                            <div class="select_list_radio" @click="select_list_radioClick($event)"><input type="radio" id="by_date" name="sort_list"><label for="by_date"><span>По новизне</span> </label></div>
                        </div>
                    </div>
                </div>
            </div>
            <a href="#" class="sort_icon"></a>
            <div class="selected_list">
                <div class="select_list_wrapper" :class="{open: sortListOpened}">
                    <div class="select_list_current" @click="select_list_currentClick($event)">
                        <span class="label">Показывать по:</span>
                        <span class="select_list_current_item">7</span>
                    </div>
                    <div class="select_list">
                        <div class="select_list_radio" @click="select_list_radioClick($event)"><input type="radio" id="by_six" name="see_list" v-on:click="forSelect(1)" checked><label for="by_six"><span>7</span> </label></div>
                        <div class="select_list_radio" @click="select_list_radioClick($event)"><input type="radio" id="by_twelve" name="see_list" v-on:click="forSelect(2)"><label for="by_twelve"><span>14</span> </label></div>
                        <div class="select_list_radio" @click="select_list_radioClick($event)"><input type="radio" id="by_two_four" name="see_list" v-on:click="forSelect(3)"><label for="by_two_four"><span>21</span> </label></div>
                        <div class="select_list_radio" @click="select_list_radioClick($event)"><input type="radio" id="by_four_eight" name="see_list"><label for="by_four_eight" v-on:click="forSelect(4)"><span>28</span> </label></div>
                        <div class="select_list_radio" @click="select_list_radioClick($event)"><input type="radio" id="by_alll" name="see_list"><label for="by_alll"><span>Все</span> </label></div>
                    </div>
                </div>
            </div>

select_list_currentClick(e) {
                    var $this = $(e.target);
                this.sortListOpened = ! this.sortListOpened;
                $this.parents('.select_list_wrapper').find('.select_list').css('display', 'block');
                $this.parent().find('.select_list').slideDown("slow");

            },

[Артур Борденюк]

nastya_zholudeva, для начала нужно очень хорошо посмотреть на компоненты и на возможность их разделения. Правильно продуманные компоненты здорово помогают. :)

Если возможности такой ну совсем нет, нужно заводить для каждой выпадашки свое состояние. Еще один пример