@@gofrontend2220 а не подскажите, из за чего после обновления страницы может все ломаться и ничего не отображаться на странице (добавлял эту возможность на свой сайт)? Дело видимо именно в добавленной пагинации, ибо если её закомментить то все работает как раньше :/
я чет не пойму ток одного, в чем смысл такой пагинации и сортировки именно на фронте?(т.е для этого нам надо получать сразу все данные из БД, а если их там 10 000+) так кто то вообще делает? я всегда думал, что например для пагинации инфу надо получать кусками(т.е нажал на страницу получил нужные позиции с сервака) и касательно сортировки тож самое
как раз на тестовом задании нечто подобное дали. начал гуглить, на твой видос наткнулся) то что надо. вот если бы ещё показал как сделать asc desc было бы 5+++ ))
Только автор забыл добавить, что на реальных проектах так делать нельзя. Пагинация должна делать запросы к БД и брать оттуда только необходимое кол-во записей. Иначе при сравнительно большом количестве записей, ваш метод положит любой браузер. От такой пагинации нет никакого смысла, разве что с массивами попрактиковаться :)
@@isos6534 Я уже не помню что в видео, но по хорошему если в таблице, допустим выводится 20 записей, при загрузке страницы из базы тянутся первые 20 записей и выводятся. На второй странице пагинации снова идет запрос к базе и тянутся записи с 21 по 40 и так далее. Конечно можно оптимизировать, что бы при возврате на первую страницу не лезть в БД, но это уже нюансы.
@@VIMPdev ок, что делать с сортировкой? Каждый раз при запросе к БД сортировать данные таблицы и брать нужные записи? Или подготавливать заранее отсортированные таблицы в БД и зависимо от запроса тянуть данные с разных таблиц?
@@clevervlad1999 нет, этим всем занимается api по которому вы обращаетесь. Вы просто передаёте нужные параметре в запросе и вам возвращается отфильтрованные данные.
Таблица - это хорошо. Не хватает CRUD функционала. Например эконки EDIT на каждой строке, кликнув на которую появляются кнопки save/cancel и мы можем изменить данные.
тут реализация без vue-router, в SPA преложениях с установленным vue-router спокойно привяжете маршруты к соответствующим страничкам. У автора на канале есть уроки по vue-router.
Спасибо за урок! У меня такой вопрос: а нельзя было использовать Vuetify? Там все эти фишки(сортировка, пагинация) уже встроены. Это значительно сократило бы время. И используете ли вы сами для проектов Vuetify?
Здравствуйте! Как выводить данные, если на странице сделать поиск? Ведь по сути на страницу выводится массив "вырезанный" инструментом slice и мы не можем искать в нем, нам нужно искать в общем массиве. Спасибо большое за видео! Буду благодарен если ответите.
Добрый день! Спасибо за прекрасные уроки, все понятно, даже в каком-то смысле нативно. Кстати, есть помарочка, которая вызвала у меня небольшой затуп: её видно в коде, скажем, на 36:35, в самом верху, в pages(), деление нужно производить не на 10, а на this.usersPerPage; вдруг кому будет полезно. Кстати, вопрос по стилю: вы как-то разделяете использование CamelCase и нижних подчеркиваний в названиях переменных или пишете вперемешку оба?
Посмотрел этот урок и урок 4/8 про Axios. Сижу уже день не могу получить данные. Это все будет ли работать на Vue CLI 3, Vuex 4 ? Я в форумах искал не нашел ответа консоль не видит ошибок. Что делать ПЖ помогите...(ИСПРАВЛЕНО ответ в кометах)
Ошибка была исправлено.)) Ошибка заключалось в моем невнимательности, поле this.GET_PRODUCTS_FROM_API я забыл поставить скобки)))) mounted() { this.GET_PRODUCTS_FROM_API() }
Оч полезное видео, большое спасибо! Но возник один вопрос, который я не могу разобрать, можете сможете разъяснить мне пожалуйста, а именно: Зачем в App.vue мы импортируем из vuex mapGetters и после передаем поле users в пропсы компонента Почему мы сразу в v-table.vue также не импортируем из vuex mapGetters и не используем уже непосредственно там поле users? Зачем передавать через пропсы?
Mr Reflection в принципе можно, но есть риск того, что таблица уже будет рисоваться в dom, а данные в геттере еще не будут готовы и тогда получим ошибку. Поэтому мы дергаем геттер в родителе, так как дочерний компонент таблицы замаунтится в дом только тогда, когда родительский закончит маунт и как следствие геттер уже будет запрошен и мы гарантированно загрузим его в таблицу.
Может кто подскажет , в каком уроке подключали Material Icon ? Я так смотрю он тут не компонентом , а html вставляется , интересно посмотреть поэтапно как установить , при чтении плохо воспринимаю , нужно прям мелочи увидеть , чтобы вопросы отпали
AxiosResponse возникла ошибка "Type annotations can only be used in TypeScript files.ts(8010)" в файле store. Может у кого тоже была, подскажите решение
Добрый день а как можно пагинацию ограничить, если данных слишком много которые получаются через API, а если конкретно то данных 7326 и там 440 страниц, которые опознались пагинацией, и как сделать допустим 1,2,3,4,5,6.......438.439.440, если не сложно помогите пожалуйста, пагинация сделана по вашему примеру
Есть бесплатный источник с подготовленной базой данных json Разные варианты данных: @t - другие варианты конкретно для этого урока: @t Если хочется работать со своими данными тогда можно, как у автора видео. Плюс, источника выше - не надо постоянно перезапускать db.json
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](http://i.ytimg.com/vi/5lBf-Fm4io4/mqdefault.jpg)
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](/img/tr.png)
![[ВАЖНО - Читай описание] Урок 1/8. Создание сборки Vue приложения](http://i.ytimg.com/vi/22W54aRGr3Q/mqdefault.jpg)
Канал достоин подписоты. Побольше Vue - как он самый легкий из (Vue, React, Anglural)
Спасибо за видео! Единственное нормальное объяснение реализации пагинации которое я видел. Лайк!
Михаил Сергеевич рад стараться:)
@@gofrontend2220 а не подскажите, из за чего после обновления страницы может все ломаться и ничего не отображаться на странице (добавлял эту возможность на свой сайт)? Дело видимо именно в добавленной пагинации, ибо если её закомментить то все работает как раньше :/
Mikhail так трудно сказать. Надо кол видеть. Можете в телеграм написать @aboltnev
@@mikhail2238 Из-за того, что у тебя таблица не может стартовать из-за отсутствия данных. Скорее всего в хранилище нужно прописать users = []
Спасибо, куча полезных видео по вью посмотрел. Почти во всем разобрался, а вот связку vuex + axios ты мне помог понять. Жму руку 🤝
Огонь!)
спасибо большое за пагинацию более чем понятно
Очень полезный урок! Респект
Спасибо огромное за ваши уроки! Все просто и понятно! Продолжайте снимать!
А как сортировать в обратном порядке, при последующих кликах? как toggle
я чет не пойму ток одного, в чем смысл такой пагинации и сортировки именно на фронте?(т.е для этого нам надо получать сразу все данные из БД, а если их там 10 000+) так кто то вообще делает? я всегда думал, что например для пагинации инфу надо получать кусками(т.е нажал на страницу получил нужные позиции с сервака) и касательно сортировки тож самое
как раз на тестовом задании нечто подобное дали. начал гуглить, на твой видос наткнулся) то что надо.
вот если бы ещё показал как сделать asc desc было бы 5+++ ))
Только автор забыл добавить, что на реальных проектах так делать нельзя. Пагинация должна делать запросы к БД и брать оттуда только необходимое кол-во записей. Иначе при сравнительно большом количестве записей, ваш метод положит любой браузер. От такой пагинации нет никакого смысла, разве что с массивами попрактиковаться :)
А как правильно? подскажите видео или материал по лучше?
@@isos6534 Я уже не помню что в видео, но по хорошему если в таблице, допустим выводится 20 записей, при загрузке страницы из базы тянутся первые 20 записей и выводятся. На второй странице пагинации снова идет запрос к базе и тянутся записи с 21 по 40 и так далее. Конечно можно оптимизировать, что бы при возврате на первую страницу не лезть в БД, но это уже нюансы.
@@VIMPdev спасибо, а можешь туториал сделать?
@@VIMPdev ок, что делать с сортировкой? Каждый раз при запросе к БД сортировать данные таблицы и брать нужные записи? Или подготавливать заранее отсортированные таблицы в БД и зависимо от запроса тянуть данные с разных таблиц?
@@clevervlad1999 нет, этим всем занимается api по которому вы обращаетесь. Вы просто передаёте нужные параметре в запросе и вам возвращается отфильтрованные данные.
Крутой канал! Спасибо за видео
Spasibo! Dolgo iscala prostyu schemy kak postroit pagination
лучшее видео!
Таблица - это хорошо.
Не хватает CRUD функционала. Например эконки EDIT на каждой строке, кликнув на которую появляются кнопки save/cancel и мы можем изменить данные.
data: github.com/antonboltnev/vue-portfolio-code-example/blob/master/db.json
есть такой момент, если например нажать в браузере назад, то будет перекидывать на предыдущую страницу на сайте, а не по пагинации
тут реализация без vue-router, в SPA преложениях с установленным vue-router спокойно привяжете маршруты к соответствующим страничкам. У автора на канале есть уроки по vue-router.
Тот момент, когда ставишь лайк одновременно с кнопкой воспроизвести) спасибо! У вас есть свой курс?
Не совсем понял, как вы по переменной pages, которая возвращает число прошлись циклом.. (22.47)
да, мне тоже интересно
Спасибо за урок! У меня такой вопрос: а нельзя было использовать Vuetify? Там все эти фишки(сортировка, пагинация) уже встроены. Это значительно сократило бы время. И используете ли вы сами для проектов Vuetify?
ai Gooner ну мы же вроде как учимся:) а вьютифай сделает все за нас и какой смысл в этом?) я не использую его в проектах. Слишком много лишнего
Спасибо большое!
а как использовать связи ORM Laravel во vue? не могу найти информацию совсем
Лайк за шутку
Здравствуйте! Как выводить данные, если на странице сделать поиск? Ведь по сути на страницу выводится массив "вырезанный" инструментом slice и мы не можем искать в нем, нам нужно искать в общем массиве. Спасибо большое за видео! Буду благодарен если ответите.
''супер таблица, спасибо за просмотр) штука" хехе)
Добрый день!
Спасибо за прекрасные уроки, все понятно, даже в каком-то смысле нативно.
Кстати, есть помарочка, которая вызвала у меня небольшой затуп: её видно в коде, скажем, на 36:35, в самом верху, в pages(), деление нужно производить не на 10, а на this.usersPerPage; вдруг кому будет полезно.
Кстати, вопрос по стилю: вы как-то разделяете использование CamelCase и нижних подчеркиваний в названиях переменных или пишете вперемешку оба?
UPPER_SNAKE_CASE используется для констант.
Посмотрел этот урок и урок 4/8 про Axios. Сижу уже день не могу получить данные. Это все будет ли работать на Vue CLI 3, Vuex 4 ? Я в форумах искал не нашел ответа консоль не видит ошибок. Что делать ПЖ помогите...(ИСПРАВЛЕНО ответ в кометах)
Ошибка была исправлено.)) Ошибка заключалось в моем невнимательности, поле this.GET_PRODUCTS_FROM_API я забыл поставить скобки))))
mounted() {
this.GET_PRODUCTS_FROM_API()
}
Вопрос: Обязательно ставить return в стрелочных функциях, по-моему это и так подразумевается? Например когда мы задаем дэфолтное состояние в пропсах.
не обязательно, оно работает by default
prop: type check failed for prop "row_data". Expected Object, got Array
Все делал как на видео, но поймал вот такую ошибку
Оч полезное видео, большое спасибо!
Но возник один вопрос, который я не могу разобрать, можете сможете разъяснить мне пожалуйста, а именно:
Зачем в App.vue мы импортируем из vuex mapGetters и после передаем поле users в пропсы компонента
Почему мы сразу в v-table.vue также не импортируем из vuex mapGetters и не используем уже непосредственно там поле users? Зачем передавать через пропсы?
Mr Reflection в принципе можно, но есть риск того, что таблица уже будет рисоваться в dom, а данные в геттере еще не будут готовы и тогда получим ошибку. Поэтому мы дергаем геттер в родителе, так как дочерний компонент таблицы замаунтится в дом только тогда, когда родительский закончит маунт и как следствие геттер уже будет запрошен и мы гарантированно загрузим его в таблицу.
@@gofrontend2220 понял, спасибо за разъяснение
@@gofrontend2220 привет, куда пропал? Ждем твоих крутых видосов. Надеемся - что у тебя все хорошо.
Может кто подскажет , в каком уроке подключали Material Icon ? Я так смотрю он тут не компонентом , а html вставляется , интересно посмотреть поэтапно как установить , при чтении плохо воспринимаю , нужно прям мелочи увидеть , чтобы вопросы отпали
проимпортируй в main.js import 'material-design-icons-iconfont' и тогда сможешь прописывать тег с названием нужной иконки
Классно
AxiosResponse возникла ошибка "Type annotations can only be used in TypeScript files.ts(8010)" в файле store. Может у кого тоже была, подскажите решение
его не надо писать , это шаблонное заполнение от ВебШтрома(Среды на котором автор пишет)
Это фронт или бэк?
Реально, а почему не выложить исходники? Я наткнулся на ошибку и хоть убей не могу найти её сравнивая свой код и код на видео, исходник бы помог :(
Если я хочу сделать пагинацию на по количеству строк на странице, а по первой букве user.name ?
Сделал. Корявенько, но получилось.
Добрый день а как можно пагинацию ограничить, если данных слишком много которые получаются через API, а если конкретно то данных 7326 и там 440 страниц, которые опознались пагинацией, и как сделать допустим 1,2,3,4,5,6.......438.439.440, если не сложно помогите пожалуйста, пагинация сделана по вашему примеру
Решили вопрос.? Отпишите пожалуйста
@@TAtoshkkko Давно решил, просто используя плагин пагинации
@@StormShadow-p9x не могли бы вы пожалуйста скинуть код или ссылку на решение данного вопроса? Был бы крайне признателен!
@@HearonPlay Этот вопрсо уже давно не актуален, так как эту работу решают плагины на пагинацию, своими силами не имеет смысла решать задачу
@@StormShadow-p9x спасибо
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
начало разбивки на постраничную пагинацию 21:00
спасибо
Есть бесплатный источник с подготовленной базой данных json
Разные варианты данных:
@t - другие варианты
конкретно для этого урока:
@t
Если хочется работать со своими данными тогда можно, как у автора видео.
Плюс, источника выше - не надо постоянно перезапускать db.json
Pagination 20:21 ( pun =))
все хорошо, но а если 50 страниц? и квадратиков пагинации будет больше чем список пользователей.
pages.slice(index-1, index+1).map(page => page)
@@nuraimaratova480 спасибо. но вопрос не в теоретической реализации для меня конкретного, а чтобы это показать зрителям.
20:40 Давайте Сделаем Пагинацию
Полезный урок, но как пожелание: поменьше "ээээ"
Исходники можно же было выложить
напиши сам =)
@@ВиталийСлободянюк-х8м ЖЕЛАНИЕ ПРОПАДАЕТ СМОТРЕТЬ И СОВМЕСТНО ДЕЛАТЬ, ТЕРЯЕШЬ ЗРИТЕЛЕЙ, ПРОГРАММЁР
@@ВасяИванов-ж7м я только что прочитал набор слов не связаных между собой))
А вы хотите все готовое? Такого не будет. Я здесь учу людей как работать с vue. За готовыми решениями - на гитхаб
@@ВиталийСлободянюк-х8мнеудивительно, Помимо того, что соображаешь туго, наравне с этим составляешь свои видео.
Не показано, что прописать в index.html, чтобы всё заработало.
d0n pan там ничего не надо писать. А что у вас не работает?
@@gofrontend2220 не отображается на странице, всё делал по видео. На странице пусто. Если есть телеграмм, могу скрины отправить.
@@gofrontend2220
Приложение
var app = new Vue({
el: '#app',
data: {
}
})
Что я здесь забыл указать?
d0n pan давайте. @aboltnev
Аааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааа!
Аааааааа!
Аааааааааааааа!
Нифига се и никакой магии??? Воистину говорю вам браты если плохо знаешь CSS, HTML и JavaScript то веб полон чудес и магии для тебя)))))
срака, а де исходник