[ВАЖНО - Читай описание] Сортировка товаров по категориям на Vue.js. Онлайн-магазин на Vue.
HTML-код
- Опубликовано: 23 янв 2020
- --------------------------------------------------------------------------------------------------------------------------------------------------------
ВАЖНО - Видео на этом канале 3х летней давности и большинство уже НЕАКТУАЛЬНЫЕ в силу изменения синтаксиса, методов и подходов во Vue.js версии 3. Все видео были записаны на Vue.js версии 2. Много чего уже просто НЕ БУДЕТ РАБОТАТЬ или выдаст ошибки.
Новый канал на актуальном стеке Vue.js v3, Pinia, Vue router@next, Ionic (мобильные приложения), FireBase (база данных, аутентификация и тд) - / @intothecoding
НО! Новый канал ведется на АНГЛИЙСКОМ ЯЗЫКЕ - так что у вас есть уникальная возможность научиться кодить и подтянуть язык - так как Английский нужен всегда!
Жду вас на новом канале!
--------------------------------------------------------------------------------------------------------------------------------------------------------
В этом видео мы создадим возможность сортировать товары в каталоге при помощи выбора соответствующих опций в выпадающем списке.
Урок по созданию SELECT'a (выпадающего списка): • [ВАЖНО - Читай описани...
Приятного просмотра!
![[ВАЖНО - Читай описание] Vue. Программная смена состояния приложения через VUEX](http://i.ytimg.com/vi/ybwsXGDcGcI/mqdefault.jpg)
![[ВАЖНО - Читай описание] Vue. Программная смена состояния приложения через VUEX](/img/tr.png)
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](http://i.ytimg.com/vi/5lBf-Fm4io4/mqdefault.jpg)
![[ВАЖНО - Читай описание] SELECT. Создание кастомного стилизуемого компонента на Vue.js](http://i.ytimg.com/vi/d0JjvnywGHI/mqdefault.jpg)
![[ВАЖНО - Читай описание] Vue.js компонент всплывающее модальное окно используя SLOT и $REFS](/img/1.gif)
Как долго я искал этот замечательный канал. Подробно, доходчиво темы вполне из жизни, а не тудулист очередной... Спасибо за ваш труд и удачи в продвижении канала.
Огромное спасибо !!! Очень качественный материал.
отличный урок, спасибо
Мощный урок! Ставлю лайкосики.
Спасибо, большое! Очень полезно!
Спасибо, подсмотрел одну штуку!)
Классные уроки. Может запишите как делать фильтр с помощью checkbox?
Большое спасибо за труды Вам. Очень качественный материал, надеюсь продолжение последует на около VUE тему. А в idea пишете , видимо и спринг уроки возможны в будущем?
Борис Черников спасибо за отзыв:) про ide и спринг не очень понял. Спринг это же фреймворд для Java вроде?
Спринг это джава фреймворк, меня удивило использование idea для js, у джетбрейнс есть специальная версия для js, webshtorm называется.
Борис Черников да я просто ее на работе использую и пользуюсь лицензией так сказать и дома:)
👍
Непривычно для слушателей в наушниках, что в разных видео - разный уровень громкости.
Да это косяк. Беспроводные сели и пришлось другими записывать. Другие уши, другой микрофон
Можно использовать стрелочную функцию, чтобы не писать let vm = this.
this.PRODUCTS.map(item => {
if (item.category === category.name) {
this.sortedProducts.push(item)
}
})
Борис Черников можно:)
сделал так, все работает
Интересные уроки. Подскажите пожалуйста - этот магазин в итоге без СЕо параметров и невидим в разметке роботами поисковиков? Как быть?
Все то же самое легко пересоздайте в Nuxt.js, тогда роботы все увидят
Вроде все правильно написал, перепроверила как в уроке, но почему-то не работает выбор сам, хотя в консоли ошибок нет
скачал библиотеку, забилдилось,НО! в индексе вылетает ошибка мим тип и прочее, билдится все, но сборка не работает, может там что то прописать надо еще?
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
Добрый день, как из списка удалить уже существующую в тайтле категорию?
спасибо
А можно ли как то фильтровать массив получаемый из vuex с помощью мутации?
Дмитрий Купчик можно. Все тоже самое, только с использованием мутаций:) мутации это те же методы, просто заточенные на изменение данных в vuex. Если вы поместите массив, который хотите фильтровать в стор - тогда мутируйте их
круто, спасибо! не очень понял момента с *map* и использовал *filter*
selectCategory(option) {
// _из дочернего передавал option и в родительском понятнее с ним_
this.selected = option.name;
this.sortedProducts = this.PRODUCTS.filter(function(product) {
return product.category === option.name
// _почему я не могу использовать в фильтре this.selected ?_
})
}
мне тоже это не совсем понятно
А почему называется сортировка если это фильтр?
И странное желание везде использовать map, как уже писали в комментах здесь уместнее filter
А вообще мне кажется правильнее фильтровать на сервере: localhost:3000/products?category=Женские
А в остальном что касается vue и компонентов, мне все нравится, спасибо
все супер, но при билде вылетает ошибка Cannot find module 'is-obj'
В видео показана фильтровка данных, а не их сортировка для пользователя.
Почему данные для select хранятся в компоненте, а не в store?
Ну потому что используются эти данные и этот селект только в этом компоненте. Надо будет где то еще - переносите в стор
@@gofrontend2220 понял, спасибо
Почему то выбранная функция не отображается, я имею ввиду, что даже после выбора функции отображается та, что стоит по дефолту
Нашел - у вас sortByCategories vm.selected === category.name; а нужно vm.selected = category.name;
Ну типо фильтрация без пагинации даром никому не нужна. Это нужно делать на сервере.