[ВАЖНО - Читай описание] SELECT. Создание кастомного стилизуемого компонента на Vue.js

[@mrbasfed1948]

Спасибо! Полезный урок. Как раз надо было кастомный селект сделать, да и понять принцип как это работает. )

[@КлимСомов-х6с]

Спасибо! Очень годные уроки

[@GTAlexSEO]

Реально бомба! Отличный урок! Подача супер - всё по теме, чётко и без соплей! Лайк и подписка однозначно! Все курсы пересмотрю ...

[@kupiros]

1. При addEventListener можно не юзать bind, достаточно обычной передачи метода, контекст не теряется
2. При removeEventListener надо указывать true в конце (параметр useCapture должен быть таким же как и при создании слушателя), иначе не удалится
Косячнул под конец видоса, ты чего) но всё равно лайк)

[@kupiros]

а еще лучше не юзать true в лисенерах документа, а использовать везде @click.stop в самом селекте, тогда вообще не будет лишних срабатываний :)

[@ВладимирХроменок]

Бомба! То что надо было. И как раз про кастомный селект. И про emit было раньше не до конца понятно. Теперь , вроде как, все стало на свои места! Хороший урок, граммотная речь. Подписка и лайк!)

[@nikanorra]

супер! как же Вы мне помогли! спасибо!

[@ГаляДмитришин-б5ч]

А как два таких элемента на странице использовать? чтоб они раздельно выбирали данные?

[@agafonoff93]

HEELP! =) Почему когда добавляю обработчики Mounted и beforeDestroy они убирают селекты но не меняется title на выбранный селект?

[@Kempriol]

Было бы круто, чтобы еще обернуть доступностью с клавиатуры подобный компонент + как он поведёт себя в мобиле, учитывать ли смещение по верхней границе экрана или еще что, вообще в мобиле дефолтный селект открывается в "модалке", что привычнее

[@gofrontend2220]

Kempriol вообще по бест практису надо для мобильного разрешения сделать нативный селект. Просто создать тен select с опциями и показывать его на мобилке а стилизованный скрыватт

[@ДмитрийМеньшиков-ю5с]

Подскажите, пожалуйста как заанимировать появление option?

[@alexandermironenko2941]

Спасибо большое

[@silveringreviews]

а как перезаписать изначальное значение value в родительской data?

[@annashalbuzova8124]

Здравствуйте, подскажите какую версию vue вы используете в данном видео ? 2 || 3?

[@gulminezduisen3516]

Super

[@tatsianaa4408]

А как быть в случае если дефолтное значение из пропса будет поступать?

[@GeliosGarik]

всё здорово, спасибо!
в конце только c добавлением _mounted_ не могу теперь свернуть список опций по клику _@click="areOptionsVisible = !areOptionsVisible"_ , меняется false сразу на true.
и ещё, в вашем видео было сказано использовать *is* для boolean, тут уже в названиях стоит избегать тогда множественного числа)))

[@mrbasfed1948]

В названиях надо придерживаться правил языка, а не от балды буквы набирать. Всё там правильно. )

[@tolebiGamingTime]

Да у меня тоже такой проблема

[@tolebiGamingTime]

@@mrbasfed1948 ты не прав

[@youtubestark873]

да, автор не учел этот момент почему то. я поправил вызываемую функцию при клике на document, хз насколько правильно но работает
hideSelect(e) {
if (!document.querySelector(".title").contains(e.target)) {
this.areOptionsVisible = false;
}
}

[@РусланДенисламов-ш8ш]

@@youtubestark873 Спасибо!) Тоже не мог понять почему элемент не сворачивается

[@stevenson5402]

Здравствуйте! Как можно подобный компонент воткнуть на уже готовый сайт?

[@d-mbappe]

ало, где ссылка на гит

[@gofrontend2220]

! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆

[@konstantinkhomenko6216]

Лайк однозначно! Как называется тема редактора?

[@gofrontend2220]

Konstantin Khomenko material oceanic

[@adventure229]

а для чего создали beforeDestroy не пойму

[@annashalbuzova8124]

наверное, чтобы изменять значение hideSelect обратно(из true в false). Хотя мне тоже не до конца понятно зачем это, работает и без него

[@ПавелФролов-ю2м]

1) Зачем держать в памяти обработчик которые отвечает за компонент которого нету на странице
2) При каждой новой отрисовке компонента, хук mount будет закидывать +1 оброботчик. Т.е. будет утечка памяти. beforeDestroy убирает слушатель и утечка не происходит.
Итог: Для того, что бы убрать обработчик когда компонент не будет на странице и не было утечки памяти.

[@kz4fun]

Можно веть сделать навигацию таким образом? И чтоб изначально допустим было выбрано 'главная' ?

[@Abbas.Amaev.]

Без проблем

[@TheBorninmotion]

а мультиселект ?

[@soulwind7577]

А реально как то сделать через дерективу v-model ?? Что бы был прям реально как полностью кастомный select без лишних емитов

[@gofrontend2220]

Да можно. Нужно из метода где выбирается опция создать эмит с названием 'input': this.$emit("input", value), где value это выбранная опция. В этом случае если эмитися событие с названием input, можно из родителя зацепиться за него v-model'ю

[@TheBorninmotion]

@@gofrontend2220 можно пример ?