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

--------------------------------------------------------------------------------------------------------------------------------------------------------
ВАЖНО - Видео на этом канале 3х летней давности и большинство уже НЕАКТУАЛЬНЫЕ в силу изменения синтаксиса, методов и подходов во Vue.js версии 3. Все видео были записаны на Vue.js версии 2. Много чего уже просто НЕ БУДЕТ РАБОТАТЬ или выдаст ошибки.
Новый канал на актуальном стеке Vue.js v3, Pinia, Vue router@next, Ionic (мобильные приложения), FireBase (база данных, аутентификация и тд) - / @intothecoding
НО! Новый канал ведется на АНГЛИЙСКОМ ЯЗЫКЕ - так что у вас есть уникальная возможность научиться кодить и подтянуть язык - так как Английский нужен всегда!
Жду вас на новом канале!
--------------------------------------------------------------------------------------------------------------------------------------------------------

[@mrbasfed1948]

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

[@GTAlexSEO]

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

[@kupiros]

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

[@kupiros]

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

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

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

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

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

[@gofrontend2220]

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

[@nikanorra]

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

[@alexandermironenko2941]

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

[@agafonoff93]

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

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

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

[@Kempriol]

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

[@gofrontend2220]

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

[@gulminezduisen3516]

Super

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

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

[@annashalbuzova8124]

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

[@tatsianaa4408]

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

[@d-mbappe]

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

[@silveringreviews]

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

[@stevenson5402]

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

[@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 Спасибо!) Тоже не мог понять почему элемент не сворачивается

[@kz4fun]

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

[@Abbas.Amaev.]

Без проблем

[@adventure229]

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

[@annashalbuzova8124]

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

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

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

[@soulwind7577]

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

[@gofrontend2220]

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

[@TheBorninmotion]

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

[@konstantinkhomenko6216]

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

[@gofrontend2220]

Konstantin Khomenko material oceanic

[@TheBorninmotion]

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