[ВАЖНО - Читай описание] Vue.js компонент всплывающее модальное окно используя SLOT и $REFS

[@АлмазФахрутдинов-м9п]

Спасибо добрый человек!) Я наконец понял для чего нужны слоты

[@gofrontend2220]

Алмаз Фахрутдинов наздоровье:)

[@ingvarriver5793]

Отлично. Все получилось, понятно объясняете. 👍

[@JohnDoe-p1y]

Читешь доки все понятно. Потом думаешь: 'а зачем?' Потом смотришь видос и приходит первое понимание. Спасибо.

[@БорисЧерников-м3ь]

Спасибо, то что доктор прописал 😉

[@gofrontend2220]

Борис Черников наздоровье:)

[@igorkulibaba7287]

Отличнейший урок! Спасибо за труды

[@BorodinRA]

Спасибо! Ты объяснил то чего нет в оф документации...

[@oleksiizelenko9357]

Хорошие уроки. Немного запутался в последовательности. Прошел 8 уроков, потом пропала последовательность. Но это мелочи. Желаю автору больше свободного времени и вдохновения для написания новых уроков!!!

[@AlexanderGrinvald]

Отлично, все работает, очень полезный урок

[@Rasulyo]

Отличное объяснение , в 11 видео , vm.selected = category.name)

[@timminero7664]

Классно! Вот только звук тихий, но видео очень крутое!! Спасибо большое за труд!!

[@gofrontend2220]

Timmi Nero да со зауком я дальше разобрался:)

[@ihorlevit5369]

💪🚀🚀

[@ИгорьНово]

Возвращайся на ютуб!

[@jenesius9397]

jenesius-vue-modal для Vue3 отличный инструмент

[@vladbreez4036]

Было бы очень полезно, если бы вы могли в самом начала показать результат, то что мы хотим сделать, а после уже рассказывать про реализацию. Пришлось сначала перемотать в самый конец, а потом уже понял что это то что мне нужно и начал смотреть. Но лукас я всё равно поставлю

[@vladbreez4036]

я по-другому реализовал, без слотов и рефс. через v-show и @close Я хз где тот комент, где спрашивали, но на всякий случай оставлю это здесь 😁

[@r35p3ct00]

Для скрытия окна я использовал метод проще и, как мне кажется, правильней, передал по клику $event в функцию, где: if (event.path[0] == this.$refs.editor_wrap) {this.show_editor = !this.show_editor} Может кому пригодится.

[@gofrontend2220]

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

[@sematv121]

4:15 Стили не желательно так писать т.к. это усложняет поиск потом для следующего программиста этого стиля

[@anton-trofimov]

Хороший урок. Спасибо. Если есть возможность, увеличьте масштаб, плохо видно. И можно же метод не задавать кнопке, можно просто же директиву v-show со значением true ставить. И ещё - можно же как-то обойтись без нативного js при закрытии на wrapper?

[@gofrontend2220]

Вы про какую именно кнопку? Показа поапа? А как его тогда показывать и скрывать? Кто будет менять true на false в v-show/v-if?)

[@gofrontend2220]

V-show это скрытие и показ элемента через display:none, v-if это вообще удаление и монтирование элемента в дом-дерево. Если элементу сказать v-show=“true” это будет во-первых бессмысленное действие, так как элемент изначально видим, а во-вторых статичное. Чтобы скрыть элемент по-умолчанию, надо ему через директиву v-if или v-show задать переменную с значением false, а для показа надо эту переменную менять на true. А как можно менять переменную без метода? Разве что в template на кнопку на @click так и повесить @click=“переменная=true”. Но не хорошо писать javascript в template, если можно поместить это в метод

[@gofrontend2220]

Антон Трофимов Для закрытия вы можете использовать директивы. Например v-clickoutside (это не дериктива vue. Вам придется ее писать самому!). Поищите в гугле, но это тоже отчасти наттвный js. Либо плагины какие-то. Но поверьте, те 2 строчки на нативном js что написал я - это самое простое решение:)

[@anton-trofimov]

@@gofrontend2220 Добрый день. На счёт закрытия на область вне попапа - нашел такую штуку click.self, ещё проще действует)

[@alexanderxp2804]

На 2:55 После прописывания строки "material-design-icons-iconfont": "^5.0.1" , в файл package,json и строки import 'material-design-icons-iconfont' в файл main.js возникает ошибка: Module not found: Error: Can't resolve 'material-design-icons-iconfont' in 'C:\GitHub \tutorial_online_shop\src' . Данную ошибку устранил собственно командой установки : npm install material-design-icons-iconfont --save . После чего ошибка пропала. Данная команда установки прописала еще в файле package-lock.json следующий объект: "material-design-icons-iconfont": { "version": "5.0.1", "resolved": "registry.npmjs.org/material-design-icons-iconfont/-/material-design- icons-iconfont-5.0.1.tgz", "integrity": "sha512-Xg6rIdGrfySTqiTZ6d +nQbcFepS6R4uKbJP0oAqyeZXJY/bX6mZDnOmmUJusqLXfhIwirs0c++a6JpqVa8RFvA==" },

[@ant3413]

Go Frontend подскажи пожалуйста,а вот на KZbin например колочольчик,это ведь по сути всплывающий popup тоже?и как его написать?)

[@vitiok78]

А почему не используете стрелочные функции для сохранения контекста?

[@gofrontend2220]

Victor Cozhuhari потому что не привык:) они более короткие и красивые, но из-за специфики как раз контекста можно запутаться и потом огрести багов:) дело вкуса

[@vitiok78]

@@gofrontend2220 Согласен. Я сразу чётко уяснил их отличие именно в плане контекста, пользуюсь там, где надо, и это экономит много повторяющихся действий. Мне они, кстати, наоборот, не нравятся в плане красоты, но как инструмент они хороши

[@gofrontend2220]

@@vitiok78 Главное чтоб было удобно самому и не мешало другим, если таковые есть )

[@SergiuBurduja-y1l]

Спасибо за урок, только на самом деле это не универсальный компонент. Нужно было использовать store, и там поработать с action и getters, чтобы не использовать emit.

[@mrfriz]

Напутствие к просмотру, если вы пришли сюда ради Vue, а не CSS: L = +10 сек J = -10 сек Shift+> = ускорить (нажимаем 4 раза)

[@Влад-ф6с2р]

*Привет мир*

[@kf9465]

Здравствуйте! Как из потомка получить доступ к computed родителя? получение метода идет через emit, а вычисляемые свойства как?

[@gofrontend2220]

Kamil Fataliev во-первых эмит не получает доступ к методу родителя. Эмит поднимает метод из дочернего компонента и обрабатывает его методом родителя. Доступа у дочернего компонента не. Вообще ни к чему вне себя самого. Но вы можете передать дочернему компоненту какой-нибудь компьютед через props. и в дочернем принимаете в разделе props

[@kf9465]

@@gofrontend2220 Здравствуйте! Делаю по видео попап для каждой карточки товара, но при открытии разных карточек данные в ней идут от первой карточки, что я мог упустить? Единственное отличие от вашего видео это то что модалка сделана на бутстрапе, но это ведь не важно насколько я понял

[@gofrontend2220]

Kamil Fataliev не важно да. Надо код смотреть. Попап показывает то, что в него передали. Смотрите почему в него прилетает только первая карточка

[@kf9465]

Go Frontend попозже у компа буду, код может отправлю, возможно кэш браузера фигней страдает , гляну отпишусь, спасибо

[@Kempriol]

На сколько оправдано использовать emit для поднятия события в родителя? Я привык пропсами принимать ссылку на функцию в модалке, в вашем случае addToCart из родителя

[@gofrontend2220]

Kempriol а как еще поднять событие из ребенка в родителя, кроме как эмитом? Ну можно еще шину событий делать. Но имхо эмит проще

[@gofrontend2220]

Kempriol а пропсы работают только вниз. Из родителя в ребенка

[@gofrontend2220]

Kempriol а я понял. Нет ну можно как вы делать. Просто типа по бест практису: props это вниз, emit это наверх

[@Kempriol]

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

[@gofrontend2220]

Kempriol а вот это плохо. Все методы, которые касаются только компонента должны быть в компоненте. Смотрите, что проще, 1 раз прописать в компоненте модалки метод закрытия по клику вне? Или же каждый раз это делать в родителе? А если у вас 20 ррдителей с этими модалками? 20 методов:) вы просто можете настроить и так и так. Например клик вне модалки - этот метод пишем в компоненте, но так же модалка может получать какой то пропс и следить за ним. И если пропс изменился из родителя - закрыть/открыть попап

[@jeqtos9643]

Почему компоненты называются с приставкой v-? Нельзя по расширению файлов понять, что используется vue?

[@gofrontend2220]

Jeqtos просто так. Мне так нравится. И v к vue никакого отношения не имеет

[@GeliosGarik]

посмотрите *Урок 8/8. Refactoring приложения Vue. Best-practise* там подробно объясняется. Если кратко, то любой префикс можете придумать, это чтобы с родными html тегами не пересечься

[@gofrontend2220]

Garik Gelios есть еще такой момент: у вас могут быть общие компоненты и проектные. Так вот общие могут быть потом вынесены в другой проект. И чтобы не путаться какие общие, а какие чисто проектные - проектные должны как-то отличаться по названию. Вот и все.

[@stt1632]

При добавлении айтема в корзину стоит ли этом случае делать кнопки disabled?

[@gofrontend2220]

Андрей StT а как душе угодно. Либо дизейблить и менять на них текст, типа ДОБАВЛЕНО или В КОРЗИНЕ. Либо оставлять как есть, но как то по-другому намекать пользователю о том, что товар добавлен. Напрример уведомлениями, про которые будет урок скоро.

[@kf9465]

@@gofrontend2220 здравствуйте! А если мы например добавили и при добавлении поменяли текст на ДОБАВЛЕНО, как вы сказали, каким образом сделать так чтобы при повторном нажатии кнопка перевела нас в корзину, а не добавила товар еще раз?

[@gofrontend2220]

Kamil Fataliev ну поставте на это условие router.push({name: корзина}) как то так

[@ivanololomine]

isVisible = !isVisible, а не 2 отдельных метода

[@sematv121]

Ну такое +/- Со многим не согласен.

[@checkTM]

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