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

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

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

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

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

Читер))

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

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

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

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

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

Какие курсы можете порекомендовать, для изучения параллельно этому? Как вам курсы Максимиллиана Шварцмюллера?

Доброго дня! Спасибо за видео. В секцию видео вы поместили "currentPopupController: null," но в методах использовали "this.$options.popupController" - это же просто опечатка?

Огромное спасибо Вам за вклад в подростающее IT сообщество! Очень интересно смотреть каждый Ваш выпуск!💥

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

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

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

Из-за жидкого фейла Минина просмотрел/прорешал весь вышедший курс и остался доволен, когда продолжение?

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

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

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

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

вот. теперь мне придется переписать все модалки у себя. потому что так ну очень прям ништяк смотрица с точки зрения кода.

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

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

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

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

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

Пока только один раз в жизни использовал трюк с промисами... нужно было список свойств отправлять на бэк, чтобы он с ними провернул ресурсоемкие действия, сразу пачку пыха пререварить не успевала и сыпалась по таймауту... было принято решение на фронте запустить асинхронный цикл, т.е. отправляем одно свойство, ждем ответа, для надежности (стояла защита от ддоса) выдерживаем паузу в 1 секунду и отправляем следующее свойство...
Так вот, отправить fetch, дождаться ответа и перейти на слудующую итерацию было не трудно, но после итераций 20-25 сервак рубил концы... помозговав часик нашел выход, создавать при ответе сервера новый промис, а резолвить его через setTimeout, медленно но верно такой код способен переварить любое кол-во свойств)))

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

Спасибо!

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

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

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

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

но это также не работает.
единственный рабочий способ это setTimeout.
возможно я еще чего-то не знаю.

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

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

Привет, спасибо за полезный контент!
На Composition API не сложно вынести методы из компонента и можно также их вызывать используя ref без диких костылей.
Пример:
Код в дочернем компоненте:
...
setup() {
const show = () => {
console.log('show')
};
return { show }
},

Код в родительском:
...
<app-date-picker ref="datePicker" />
...
const datePicker = ref(null);

onMounted(() => {
datePicker.value.show();
});

return {
datePicker
}

Поправь пожалуйста если я ошибаюсь.

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

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

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

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

спасибо вам!

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

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