0

Событие 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' прилепила в надежде, что это заставит код при изменении маршрута навешивать класс:(

1 ответ 1

1

Ваша главная ошибка в том, что вы подходите к vue.js с неверным (для данного framework'a) мышлением взятым из jQuery. В Vue изменение DOM напрямую крайне не приветствуется и производится только в редких случаях. Вашу задачу Вы можете реализовать прикрепив атрибут :class (https://ru.vuejs.org/v2/guide/class-and-style.html) на объект DOM.

<div class="select_list_wrapper" :class="{'open': opened}">
</div>

И далее, изменяя значение переменной opened вы сможете скрывать или показывать свой элемент так, как вам надо.

new Vue({
    data: { opened: false },
    methods: { select_list_currentClick() { this.opened = !this.opened; } }
});

По поводу анимации стоит почитать соответствующий раздел на официальном сайте:

https://ru.vuejs.org/v2/guide/transitions.html

По поводу так называемого "Jquery мышления" стоит прочитать данный ответ на SO (англ. язык):

https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background

1
  • Спасибо, все сделала, как вы указали и заработало:)
    – Jussia
    23 окт 2017 в 7:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.