#29 Попап и промисы - Vue.js: практика

[@maksymgapachilo9507]

Читал про refs, но плохо читал, и не знал что можно через refs, у родителя вызивать метод ребенка.Искал неделю), прям топ видео))

[@SuperRoqsta]

Я дико извиняюсь! А когда продолжение?

[@ablbaltabekov9083]

Наконец-то вышла тема про флажки и попапы. У нас все делают через флажки и создают их ну очень много. Сам я реализовывал через добавление в класс active. Ну не мог что то лучше придумать. Спасибо что затронули эту тему

[@MrAkhmat]

Спасибо Илья. Позволю себе оценить ваше изложение знаний. Это по факту очень эффективный подход. Думаю вы сами дошли до этого, конечно пропустив через себя много теории по обучению и прочему. У вас от природы есть предрасположенность к обучаемости и обучению. Вы погружаетесь в предметную область доходя до самой сути, становитесь ее "мастером". Больше вдохновляет не сам вью (который, видно, делался с душой, очень удобный инструмент и маст хев для современного веб программиста), а сама подача материала. Боюсь, после ваших видеокурсов, планка требований к излагающему видеокурс будет высокой. Посмотрел видеокурсов некоторое количество, но такой подачи материала нет ни у кого. Жаль что наткнулся на вас поздно, ожидал что будет очередной видеокурс. но он не очередной.

[@gerasim_vol]

дякую за відео. з нетерпінням чекаю на нові випуски.

[@JavaScriptNinja]

Сегодня или завтра.

[@JavaScriptNinja]

Сегодня или завтра наступает! С днём рождения меня 🎂

[@DimaNaks]

@@JavaScriptNinja с днем рождения, Илья!

[@gleb_04]

когда продолжение?

[@PavelSmirnov-u5v]

Спасибо, Илья!

[@AlexKozack]

Для доступа к методам дочернего компонента сейчас ведётся работа над специальными функциями `expose` и `defineExpose` для Composition API и `` соответственно. Скорее всего их уже можно использовать. Так что не так с этим всё страшно и костыльно =)

[@alexanonymous5823]

спасибо большое за видео, очень интересная тема рефы, нужно будет с ними разобраться, пока что немного сбит с толку с этими попапами, но разберусь=)) спасибо еще раз=))

[@ПавлоТимощук-ш8й]

Довольно длительный период пытался найти оптимальный вариант реализации попапов. Было много прочитано статьей на эту тему. В одной из них нашел вариант с refs, который Вы показали. Моя реализация заключается в том, что я сделал компонент-обвертку. В этом компоненте у меня вся логика открытия и закрытия попапа и каркас, в который вкладываю другие компоненты попапов. В каждом из них лежит свой html и своя логика. Эти попапы открываю через переменную с их названием. При открытии передаю название нужного попапа. При реализации этого подхода столкнулся с таким моментом, что refs работают только в одном компоненте и не всплывают до app.js. Если хочешь обратиться к компоненту, то он должен быть, так сказать, на виду)

[@neyasbltb]

Даже не представляю, как рефы могли бы "всплывать")

[@ПавлоТимощук-ш8й]

@@neyasbltb Согласен. Это просто мои наблюдения в процессе понимания Vue.

[@xfirab]

Спасибо классный урок получился

[@RuslanDasaev-f7f]

Использую модалку от vuetify, и там она закрывается автоматически при нажатии на backdrop. Допустимо ли не резолвить промис, при нажатии на backdrop?

[@xeleos]

Тоже глянул после курса Минина )) жду продолжение, очень интересно получается!

[@Antonio-fm1sq]

Спасибо!

[@lastchancehider]

спасибо вам!

[@zenkovr]

А почему не пойти с этой идеей дальше и не убрать Popup из разметки? Модальный компонент можно создавать внутри "сервиса" и монтировать его куда угодно - например к .

[@JavaScriptNinja]

Терпение, на курсе ещё не рассказали о телепорте и о provide/inject Но сразу поясню - если вы уберете его из разметки вы лишитесь возможности гибко настраивать попап

[@jackdrengr5069]

Мы так сделали у себя на проекте. Минусы: нельзя гибко из родителя попап, а самое главное - Vue ооочень не любит, когда вы руками что-то монтируете в DOM. Так например изначально подобные попапы были не видны во VueDevtools.

[@DimaNaks]

Я пока только на середине курса и сюда зашел просто чтобы спросить - подскажите пожалуйста, а когда будут новые видео? Уж очень интересный курс получился!

[@onlytryhard80]

Ожидайте

[@sergeyharchenko5116]

Отличное видео, смотреть как пишет код опытный программист - нереальный кайф

[@silveringreviews]

нереальная боль

[@timkhusainov7407]

Очень годная библиотека, до этого юзал vue-modal но оно не очень нравилось тем что для создания простого окна надо много действий делать, тут все проще

[@БорисСизов-д5ь]

Большое спасибо за курсы! У меня появился вопрос, помогите пожалуйста: У меня есть элемент input (TheInput), это мой кастомный ввод. Я разделил criptonomicon на компоненты и одним из компонентов выделил фильтрацию с пагинацией, причем так как у меня нет стора переменная filter хранится в App.vue. Она передается сначала в компонент фильтрации, а из него в компонент TheInput и при изменении input выдаются ошибки и не меняется переменная filter. Почему?(((

[@РМахиев]

Здравствуйте Илья. Прежде всего благодарю Вас за курс. Будет ли его продолжение или на этом видео он закончен?

[@JavaScriptNinja]

Не закончен, будет

[@rasulberov8093]

@@JavaScriptNinja Хорошая новость. Спасибо за ответ

[@vitaliy.artyukh]

фокус на инпуте, казалось бы что может быть проще. но фокус инпута в модальном окне, которое еще имеет анимацию при открытии не такая и тривиальная задача. если в директиве в блоке inserted обратится к элементу и выставить фокус то это не работает, вероятно когда анимация еще не закончилась то компонент еще не создался или еще что-то. Evan советовал так: bind(el, binding, context) { context.componentInstance.$once('hook:attached', () => { input.focus(); }); }, но это также не работает. единственный рабочий способ это setTimeout. возможно я еще чего-то не знаю.

[@JavaScriptNinja]

Использовать директивы - очень плохая идея для управления подобными вещами

[@ravetherover]

nextTick может быть как-то полезен в этой ситуации?

[@vdvchannel7765]

Очень и очень поверхностное рассмотрение. модалка это исскуство

[@vovchisko-dev]

Забыл Reject при внезапном уничтожении родителя попапа, например в результате работы роутера.

[@JavaScriptNinja]

Да, хорошее замечание. Сценарий очень редкий в данном кейсе, но стоит внимания

[@silveringreviews]

Property 'open' does not exist on type 'unknown'

[@JavaScriptNinja]

Что поделать, слабость тайпскрипта и вью )

[@АлександрЛобков-н7о]

Сделал у себя на проекте реализацию диалоговых окон на промисах еще 2.5 года назад. И все прекрасно работает. Только я не использую ref.

[@JavaScriptNinja]

Без рефов не получится подставлять произвольный html в слоты, а это большой минус по гибкости

[@АлександрЛобков-н7о]

@@JavaScriptNinja А зачем через рефы подставлять? Слоты работают как и обычные слоты во вью. Я использоаал без рефа чтобы вызвать функцию открытия диалога.

[@АлександрЛобков-н7о]

Кстати могут быть кейсы когда надо вызвать диалог сразу же монтирования родительского компонента и при обращении рефа еще может не существовать. Например подгрузка диалога идет через асинхронный чанк.

[@sergiishilingov5609]

Интересная реализация с промисом. Для сравнения - заэмитить confirm, обработать в родителе. После в родителе через ref закрыть попап. Какие есть преимущества у варианта с промисом?

[@JavaScriptNinja]

"в родителе через ref" закрыть попап - это плохая идея

[@sergiishilingov5609]

@@JavaScriptNinja Почему?

[@JavaScriptNinja]

@@sergiishilingov5609 потому что тогда мы приходим к тому же варианту с дроблением логики, с которого начали. Не стоит их смешивать

[@ИзиБризи-с1х]

Я надеюсь это не последнее видео в данном курсе?

[@MrAlexander446]

а почему не вынести константу из $options просто в константу выше перед export default у компонента (CONFIRMATION_TEXT)? мы же не используем константу в html

[@JavaScriptNinja]

Используем в плейсхолдере

[@MrAlexander446]

@@JavaScriptNinja оу, плохо следил, спасибо))

[@deanArtDev]

Илья, а для патрионов продолжение уже есть?

[@JavaScriptNinja]

Нет, этот курс к патреону никакого отношения не имеет, я не пытаюсь вам что-то продать :)

[@deanArtDev]

@@JavaScriptNinja не в этом дело, если бы можно было заплатить и продолюить курс было бы даже лучьше =) Все на много прозаичнее, курс хороший и хочется продолжения =)

[@deanArtDev]

Инетесно, хорошая ли идея когда у тебя модалка из 3 и более шагов передовать в resolve("nameStap") и уже опираться на это значение для понимание на каком ты шаге и рисовать соответвущий компонент?

[@alexs7931]

В итоге нужно будет делать что-то вроде {stepName:"1", data{ field1: 123}} В видео упрощённый вариант для быстрого понимания.

[@neyasbltb]

Нет, потому что resolve одноразовый. Максимум, туда можно передавать имя шага, на котором решили закрыть модалку

[@greenvirsdev7820]

Можно избавиться от ref, просто добавив slot scoped с именем например activator. Передать этому слоту функцию open и в родителе ее вызывать.

[@JavaScriptNinja]

Только если активация происходит непосредственно из шаблона

[@greenvirsdev7820]

@@JavaScriptNinja да, но это один из подходов, что ты не злоупотреблять ref. И это так же оставит возможность управлять popup через ref.

[@alimslimmer1751]

Охх, до этой главы я наверно через полгода только доберусь

[@silveringreviews]

16:30 какие крутилки? Что происходит? Убейте меня

[@Peter-vz4tb]

Промис который каким-то образом сохраняется в методе, а потом неожиданно вызывается - ни-на не понятно.

[@samesadface]

Не понимаю почему люди не используют dialog-polyfill

[@JavaScriptNinja]

Потому что у нее тоже свои проблемы. И как применение тега dialog решит задачу построения flow с ожиданием попапа

[@samesadface]

@@JavaScriptNinja Написал коммент в начале видео. И там была проблема, которая легко решается его использованием. Предотвращение перехода фокуса по tab за пределы модального окна. А какие у него есть проблемы?

[@Nikolaevichful]

Аж прийшло просвітлення!! Цікаво чи в реакті можливо таке реалізувати, а то по флажку відкривати модалку, після цього відео, не найс.

[@Denchenity]

Читер))