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

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

[@GTAlexSEO]

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

[@mrbasfed1948]

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

[@user-vi6lt4tw6u]

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

[@user-js9pd7cv6g]

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

[@nikanorra]

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

[@kupiros]

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

[@kupiros]

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

[@alexandermironenko2941]

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

[@gofrontend2220]

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

[@gulminezduisen3516]

Super

[@annashalbuzova8124]

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

[@agafonoff93]

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

[@user-ce2ls2xd2j]

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

[@Kempriol]

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

[@gofrontend2220]

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

[@user-kl6be1qp3g]

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

[@stevenson5402]

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

[@tatsianaa4408]

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

[@silveringreviews]

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

[@kz4fun]

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

[@Abbas.Amaev.]

Без проблем

[@konstantinkhomenko6216]

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

[@gofrontend2220]

Konstantin Khomenko material oceanic

[@d-mbappe]

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

[@soulwind7577]

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

[@gofrontend2220]

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

[@TheBorninmotion]

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

[@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;
}
}

[@user-cd1cv4lm7s]

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

[@TheBorninmotion]

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

[@adventure229]

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

[@annashalbuzova8124]

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

[@user-uy8cz1db9o]

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