Спасибо за урок, в конце маленькая опечатка по сортировке выбранной категории, фильтрация происходит а текст в поле не меняется, this.selected = category.name;
Спасибо за отличные видео! Т.к. это формат видеоуроков, то советую сразу приучать народ к использованию prettier, и он сам будет подсказывать как красиво оформлять код при разработке.
Victor Cozhuhari спасибо:) у меня просто в ide по умолчанию комбинация ctrl+alt+L форматирует код по красоте. Но вы правы. Я пожалуй сделаю урок по настройке рабочего окружения.
@@gofrontend2220 Я просто помню, какой говнокод я писал без prettier, и потом даже самому было тяжело в этом разбираться. И помню, как меня prettier раздражал первое время. Хотелось снести его и забыть как страшный сон. Но потом начинаешь понимать, что это очень полезный инструмент, когда код разрастается. Это как гигиена - кажется ребенку ненужной, излишней и раздражающей до первого пищевого отравления )))
@@gofrontend2220 Согласен, но привыкнув к тому виду кода, который генерируют эти плагины, потом сам автоматом будешь придерживаться этого стиля. А вот в самом начале пути программиста даже и не подозреваешь о существовании этих стандартов, пишешь как придётся, а тут тебе сразу показывают, как лучше, и ты такой: "О! Точно! А я не догадался!"
Спасибо большое за урок. Почти все работает. Только еще нашел в конце урока, что в select так и остается он на 'Все' и не меняется при выборе на 'мужские ' или 'женские' (то есть фильтрация на мужские и женские работает, товары фильтруются, но сам select остается в положении 'Все'). Казалось бы это должна была решить строка vm.selected === category.name , которая добавлялась после 11:30 на временной шкале, но нет, все равно не работало. Перелопатил весь код в этом файле, все запятые скобки и т.д, - ничего. Потом когда вернулся к тому моменту, когда мы удаляли все данные из функции sortByCategories() заметил, что мы в той предыдущей версии функции писали this.selected = category.name (c обычным присваиванием ''=' а не через строгое равенство '==='). И таким образом заменив на 12й минуте строку vm.selected === category.name на строку vm.selected = category.name у меня select начал переключать на "мужские" и "женские " значения. @UC-NllVkhmcweguxSKzb7Y3g тоже об этом написал в коментах, но он не уточнил, что нужно написать именно vm.selected = category.name. И того вся рабочая функция выглядит вот так: sortByCategories(category){ let vm = this; this.sortedProducts = [...this.PRODUCTS] this.sortedProducts = this.sortedProducts.filter(function(item){ return item.price >= vm.minPrice && item.price
Господи, чел, какой же ты зануда, прости) Чел сверху написал достаточно, чтобы понимающий чел в полвзгляда понял, о чём речь. А ты написал для людей копирайтеров, которые вообще не в курсе, что происходит) Конечно, лучше твой комментарий, чем без него, тк, наверное есть люди, кто без понятия смысла это смотрят, но всё же...)
получается, что мы сначала должны отфильтровать по цене, а потом по категории и если снова двинем ползунок он нам отфильтрует опять по всем категориям, а не по той которую уже выбрали. Хотелось бы с фильтрами разобраться подробнее, чтобы можно было добавлять их разное количество и они на ходу работали учитывая выбор в других инпутах. Можно видео или ссылку или что искать?
Может кому поможет. Кажется рабочий вариант. Все изменения нужно сделать в v-catalog.vue. Меняем соответствующий код из урока на: 1) filteredProducts() { if (this.sortedProducts.length) { return this.sortedProducts } else { return [] } } 2) sortByCategories(category) { this.sortedProducts = [...this.PRODUCTS]; if(category) { this.selected = category.name; } this.sortedProducts = this.sortedProducts.filter(item => { return item.price >= this.minPrice && item.price { return product.category === this.selected; }) } } Если код всё-таки не рабочий, скажите об этом пожалуйста!
в общем понятно, спасибо! хотелось бы сделать не пересекающиеся ползунки, получилось так _@mousemove="doNotCrosRange"_ _doNotCrosRange() { if(this.minPrice + this.step >= this.maxPrice) { //шаг вынесен в data() let tmpMin = this.minPrice; let tmpMax = this.maxPrice; this.maxPrice = tmpMin + this.step //в атрибутах уже учтён этот шаг, чтобы не уйти за границу max и не спуститься в минус this.minPrice = tmpMax - this.step } }_ но они толкают друг друга, а если передавать им max и min то сам range начинает гулять. Как блокировать движение ползунка, если другим уже определена граница?
(на 3й минуте 48 секунд) На Windows данные стили так не работают, ползунки налазят прямо на select (на выпадающий список выбора мужских и женских товаров.) И добавление стилей для фильтров .filters {display: flex; justify-content: space-between; align-items: center; } вообще никак не помогают и абсолютно ничего не меняют. Пробовал в разных браузерах: Opera, Chromium и даже IE11 - никакой разницы. Копировал стили напрямую с вашего github с файла v-catalog.vue - тоже без результатов. То есть при добавлении этих стилей вообще ползунки остаются квадратными (а не круглыми как в видео), не добавляются тени. А единственное, что меняется, это что ползунки перемещаются один под другим и начинают налазить прямо на выпадающее меню select. ( это происходит только при добавлении стилей, если их не добавлять, то не налазит ). Проблему решил использованием других стилей. Подробно описал их в ответах ниже
1. (читать по пунктам 1.2.3.)Как мне удалось узнать, данная стилизация ползунка из видео присуща именно в Mac Chrome 38 (и думаю более поздних версиях). Чтобы нормально работали стили в Windows достаточно написать следующие (но ползунок и полоска будет стилизована по стандартам Windows) : .range-slider input[type=range] { position: absolute; left: 65%; top: 180px; } ::-webkit-slider-thumb { z-index: 2; position: relative; top: 2px; margin-top: -7px; }
Это последствия предыдущего урока, где про бургер-меню было (как оно может быть устроено). Чтобы работал селект как и раньше, до того урока, нужно перелопатить файл v-catalog.vue . 1. Удалить из тега :isExpended="IS_DESKTOP" 2. из computed: {} удалить 'IS_MOBILE' , 'IS_DESKTOP' (все остальное в остальных файлах можно и оставить пока, оно не особо мешает работе приложения)
![[ВАЖНО - Читай описание] Vue.js. Фильтрация товаров по цене через ползунки (range slider)](/img/logo.svg){kind=logo}
