No video :(

Разработка UI Kit (Vue 3 + Composition API) #6. Компонент Input + Vuelidate

Подписаться 3,1 тыс.

Просмотров 4,6 тыс.

50% 1

00:46 - Введение
03:22 - Подготовка
13:39 - Компонент Input
23:55 - Вывод ошибок
44:15 - Валидация
В этом видео мы разработаем компонент Input и провалидируем данные с помощью библиотеки Vuelidate.
GitHub: github.com/Ale...
Telegram: t.me/front_eve...
Instagram: / frontend_everyday
VK: groups
Тренировка своих навыков: frontend-skill...
Vuelidate документация: vuelidate-next...
Дизайн: www.figma.com/... (автор www.behance.ne...)

Опубликовано:

28 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 38

@tonykeepfrozen Месяц назад

Не знаю сколько раз я уже говорил Вам спасибо) На Вас буквально держится все мое обучение) За этот урок хочется сказать особенное спасибо, единственный материал, который доступно и без воды объясняет работу с валидацией! Огромное, огрооомное спасибо!)

@evgeniiak7458 Месяц назад

Шикарный урок! Очень помог. Спасибо большое!

@siablo009 3 месяца назад

Золотой человек, только благодаря тебе я начал понимать документацию)

@frontend-skills 3 месяца назад

Неожиданно и приятно))))

@igorkulibaba7287 Год назад

Огромное спасибо за такие объёмные и подробные уроки💪💪💪

@frontend-skills Год назад

Спасибо, что смотрите ❤️

@badenglishcooljs8233 2 года назад

Супер, спасибо, пошел свои инпуты провалидирую как человек!

@nailabdullin7096 Год назад

Очень полезный кейс, спасибо))

@frontend-skills Год назад

Я рад, что помогло))

@dimalukashenko4865 Год назад

отличный урок, спасибо за труд!

@YarkiiYa Год назад

Отлично) Спасибо за урок!

@frontend-skills Год назад

Вам спасибо!

@orcsamuro9687 9 месяцев назад

Спасибо, было полезно

@victorplugarev1938 3 месяца назад

Спасибо! То что надо!👍

@c_i_k_a_d_a5009 Год назад

Дружище, годные видосы!

@dmitryskatov8216 2 года назад

Спасибо большое за урок!

@frontend-skills 2 года назад

🔥🔥🔥

@dmitryskatov8216 2 года назад

@@frontend-skills нужен календарь =)))

@frontend-skills 2 года назад

Компонент календаря?)

@dmitryskatov8216 2 года назад

@@frontend-skills ну да , как во всех крутых UI библиотеках)

@frontend-skills 2 года назад

Ну самостоятельно вряд-ли будем разрабатывать. Только если компонент вставлять, но надо подумать)

@user-ro1rc7dq5i 2 года назад

Спасибо за годный контент, очень грамотно и предельно понятно. Есть в планах кастомный селект запилить?

@frontend-skills 2 года назад

Да, в планах есть) причём, думаю, именно свой запилим, без библиотек. Так полезней будет)

@user-kl6be1qp3g 2 года назад

@@frontend-skills Супер, будем ждать, нового видео. И ещё, Александр небольшая просьба, увеличивать масштаб кода, лучше видно , особенно в мобильной версии

@frontend-skills 2 года назад

Принято) спасибо за фидбэк)

@sergey5806 Год назад

@@frontend-skills а я уже запилил )) но с его пере использованием проблемы как и с инпутом :( Я коммент отдельно оставил по этому делу

@xman5911 9 месяцев назад

В валидацию имени, стоит добавить проверку, только буквы. И чтобы валидация срабатывала на потерю фокуса.

@sergey5806 Год назад

Привет, подскажи плз, сделал компоненты как ты показывал но были проблемы с передачей параметров, пришлось сделать отдельные input и делать передачу через ref() и vuex Как можно сделать разные инпуты через component (как у тебя в примере) которые будут взаимодействуют друг с другом и передавать их данные в стор (Если я правильно построил вопрос :)) И насколько актуальный такой подход, работаю с человеком который не 1 год работает с Vue, он не хотел заморачиваться с компонентами, но я не могу понять его уровень знаний. Сейчас говорят что вернулся назад синтаксис export default { data => () ({}) }. Но мне оч понравился твой подход. Как лучше делать или как актуально делать? Моя цель научится делать грамотно и красиво, пере использовать код а не писать постоянно одно и тоже, что бы глаза не вытекали от написанного :) Спасибо тебе за уроки, очень круто делаешь! Ждем еще уроки...

@frontend-skills Год назад

Привет) самый главный вопрос (точнее 2). Работаешь с Vue2? И действительно тебе нужен стор? Без него не обойтись? Может можно немного пересмотреть архитектуру приложения? Стор нужен если ты одни и те же данные используешь в нескольких местах

@kalyszhek5296 Год назад

Очень внятно обясняет. 🙃👍👍👍 А как передать img, как props внутри передаваемым компонентом?

@kalyszhek5296 Год назад

А нашел, оказывается так: но почему-то с первого раза не работала, пришлось перезапустить..

@orthodox-chanel 6 месяцев назад

Есть какая то валидация от sql и js инъекций?

@web3388 Год назад

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

@frontend-skills Год назад

Все верно, согласен) Любой компонент можно по итогу кастомизировать дальше и дальше под свои требования :) моя задача показать, что это не так страшно, как может казаться :)

@dimitryselin4225 Год назад

Спасибо за материал! У меня один вопрос, как сделать так, чтобы сообщение о невалидном вводе появлялось после потери фокуса на элементе? тк, когда она появляется сразу - немного сбивает пользователя

@victorplugarev1938 3 месяца назад

Спасибо. Очень интересный и полезный урок. При установке валидтора первой команды достаточно, там уже включена установка валидаторов npm install @vuelidate/core @vuelidate/validators

@user-mo1gm8hv7l Год назад

подскажите пожалуйста, вы сначала сделали установку npm install @vuelidate/core @vuelidate/validators, затем делате - npm i @vuelidate/validators, разве мы в первой установке не установили уже валидаторс? почему второй раз нужно устанавливать ? спасибо!