Работа с формами
Типичное использование
Можно использовать директиву v-model для двунаправленного связывания данных с элементами форм input, textarea и select. Способ обновления элемента выбирается автоматически в зависимости от типа элемента. Хотя v-model и выглядит как нечто волшебное, в действительности это лишь синтаксический сахар для обновления данных в элементах ввода, с некоторыми поправками для исключительных случаев.
Внутренне v-model использует разные свойства и генерирует разные события для различных элементов ввода:
Текст
Многострочный текст
Интерполяция внутри textarea ( ) не будет работать. Используйте вместо неё директиву v-model
Чекбоксы
Один чекбокс, привязанный к булевому значению:
Список чекбоксов, привязанных к одному массиву:
Радиокнопки
Выпадающие списки
Выбор одного варианта из списка:
Если начальное значение выражения v-model не соответствует ни одному из вариантов списка, элемент
Выбрано: << selected >>
Динамическое отображение списка опций с помощью v-for :
Связывание значений
Для радиокнопок и выпадающих списков в качестве v-model обычно используются статические строки, а для чекбоксов — булевые значения:
Чекбокс
Атрибуты true-value и false-value не влияют на атрибут value тега input, потому что браузеры пропускают невыбранные чекбоксы при отправке форм. Чтобы гарантированно отправлять одно из двух значений с формой (например, «да» или «нет») используйте радиокнопки.
Радиокнопки
Списки выбора
Модификаторы
.number
Для автоматического приведения введённого пользователем к Number, добавьте модификатор number :
Если необходимо, чтобы автоматически обрезались пробелы в начале и в конце строки, используйте модификатор trim для полей ввода, обрабатываемых через v-model :
Использование v-model с компонентами
Если вы ещё не знакомы с компонентами Vue, пока просто пропустите эту секцию
Vue.js для начинающих, урок 10: формы
Сегодня, в 10 уроке курса по Vue, мы поговорим о том, как работать с формами. Формы позволяют собирать данные, вводимые пользователем. Кроме того, здесь мы обсудим валидацию форм, то есть — проверку того, что в них вводят.
Цель урока
Мы собираемся создать форму, которая позволяет посетителям сайта отправлять отзывы на товары. При этом нужно, чтобы отзыв можно было бы отправить только в том случае, если заполнены все поля формы, которые обязательно должны быть заполнены.
Начальный вариант кода
Вот что сейчас находится в index.html :
Так выглядит main.js :
Задача
Нам надо, чтобы посетители сайта могли бы оставлять отзывы на товары, но на нашем сайте пока нет средств, позволяющих получать данные от пользователей. Такими средствами являются формы.
Решение задачи
Зарегистрируем новый компонент, приступим к формированию его шаблона и оснастим его некоторыми данными:
Директива v-model
Директива v-model позволяет организовывать двустороннюю привязку данных. При такой схеме работы, если что-то новое оказывается в поле ввода, это приводит к изменению данных. И, соответственно, когда меняются данные, обновляется состояние элемента управления, эти данные использующего.
Добавим к полю ввода директиву v-model и привяжем это поле к свойству name из данных компонента.
Теперь добавим в шаблон компонента полный код формы:
Дополним набор данных компонента, добавив в него те данные, к которым привязаны вышеописанные элементы управления:
Доработаем метод onSubmit :
Далее, нам надо организовать прослушивание этого события, разместив в шаблоне product следующее:
Вот код этого метода:
Вывод отзывов о товаре
Страница с формой для ввода отзывов
Проверка форм
В формах часто бывают поля, которые, перед отправкой формы, должны быть обязательно заполнены. Например, нам не хотелось бы, чтобы пользователи отправляли бы отзывы, в которых поле текста отзыва было бы пустым.
Подобная конструкция приведёт к автоматическому выводу сообщения об ошибке в том случае, если пользователь попытается отправить форму, в которой required-поле окажется пустым.
Сообщение об ошибке
Наличие в браузере стандартных механизмов проверки полей форм — это очень приятно, так как это может освободить нас от создания собственных механизмов проверки полей. Но то, как проводится стандартная проверка данных, может, в каком-то особом случае, нас не устроить. В такой ситуации вполне логично будет написать собственный код проверки форм.
Пользовательская проверка форм
Поговорим о том, как создать собственную систему проверки форм.
Включим в состав данных компонента product-review массив для хранения сообщений об ошибках. Назовём его errors :
Мы хотели бы добавлять в этот массив сведения об ошибках, возникающих в ситуациях, когда поля формы оказываются пустыми. Речь идёт о следующем коде:
А куда поместить этот код?
Если же хотя бы одно из полей оказывается пустым, мы помещаем в массив errors сообщение об ошибке, зависящее от того, что именно не ввёл пользователь перед отправкой формы.
Осталось лишь вывести эти ошибки, что можно сделать с помощью следующего кода:
Сообщения об ошибках
Теперь у нас имеется собственная система валидации формы.
Практикум
Итоги
Сегодня мы говорили о работе с формами. Вот самое важное из того, что вы сегодня узнали:
Выбор генератора форм для Vue.js
Уважаемый хабрачитатель, хочу поделиться с тобой опытом в выборе и использовании генераторов форм для Vue.js.
Введение
Пожалуй, известно каждому, что любой выбор начинается с фиксации целей, постановки задач и формирования списка требований к объектам выбора. Данная статья описывает функциональные возможности готовых решений и не призвана ответить на все вопросы в рамках данной темы.
Если вы только погружаетесь в эту предметную область, то первое, что вам необходимо сделать — это оценить применимость данного подхода к вашей разработке. Можно выделить следующие ситуации, когда этот подход оправдает себя:
Далее необходимо определиться со списком требований к библиотеке генератора форм (данный список может отличаться от ваших требований):
Требования из данного списка не выглядят какими-то невыполнимыми, но дьявол кроется в деталях и, для того чтобы сделать осознанный выбор, не достаточно просто прочитать описание на сайте разработчика или README проекта. Основные проблемы можно обнаружить только при решении практических задач, а данная статья призвана облегчить жизнь тем, что автор уже прошёл по ровно уложенным граблям и готов поделиться с вами своими объективными и субъективными заключениями.
Несколько слов перед тем, как перейти к списку кандидатов. Под другие фреймворки, например, React или Angular, есть более достойные проекты, но изначально выбор пал на Vue.js, в силу его простоты встраивания и минималистичности, поэтому автор рассматривает только данный набор библиотек, а остальные фреймворки оставим за скобками этой статьи. Element — очень функциональный UI kit, предоставляющий практически все примитивы для быстрой разработки веб-приложений и требующий минимального опыта от разработчика, что идеально подходит для людей, переходящих в веб-разработку из других языков программирования.
Кандидаты
vue-json-schema
Описание
Интересный проект, имеет
360 звёзд на github, но заброшен с 2018 года, хорошо интегрирован с Element UI, позволяет расширять возможности основной библиотеки, добавляя свои собственные типы объектов.
Минусы
Плюсы
ncform
Описание
Китайский проект, имеет
900 звёзд на github и развивается неспешно. Все комментарии в коде на китайском языке, что усложняет понимание. Имеет встроенный механизм локализации. Основная часть проекта покрыта Unit и функциональными тестами на cypress. В библиотеке используются проприетарные ключи, отступающие от оригинальной JSON schema, но при этом не ломающие её.
Минусы
Плюсы
vue-form-generator
Описание
Самый популярный проект по количеству звёзд на github
2500, имеет хорошую документацию на английском языке. Большое количество конфигурационных возможностей элементов, но отсутствуют простые способы для локализации.
Минусы
Плюсы
vue-form-json-schema
Описание
Библиотека использует классические аннотации JSON schema для валидации, но для отрисовки UI требует отдельного объекта, содержащего UI конфигурацию — uiSchema. Поддерживает локализацию для ошибок валидации через проект и другие плагины для ajv, например, ajv-errors. Позволяет добавлять свои визуальные компоненты, используемые в uiSchema.
Минусы
Плюсы
vue-ele-form
Описание
Китайский проект с относительно большим количеством звёзд на github
530, но с полностью отсутствующей документацией на английском языке. Присутствует онлайн demo и проект для визуального создания форм, онлайн.
Минусы
Плюсы
form-create
Описание
Китайский проект с
2100 звёздочек на github, но при этом есть минимальная документация на английском языке. Формы можно конфигурировать через JSON, но для этого используется собственный формат, отличный от оригинальной JSON schema. Присутствует тема для Element UI.
Минусы
Плюсы
Дополнительные проекты
vue-vuelidate-jsonschema
Имея формы, собранные во Vue компонент, можно проверять модель по заранее подготовленной схеме и получать ошибки от валидации при прямом вызове или копить state в объекте, но при этом отсутствует возможность генерации форм.
json2vue
Проект создан для конфигурирования форм с помощью JSON, но ценность этого сомнительна, т.к. там нет валидаторов, локализации и т.д.
vue-form-builder
Очередной китайский проект по созданию форм из собственного представления, поддерживает тему с Element UI, но на этом его плюсы заканчиваются.
Выводы
Хорошего решения для генерации форм из коробки нет, каждая из рассмотренных библиотек имеет ряд преимуществ и недостатков, поэтому существуют только пути решения:
Из списка требований необходимо получить библиотеку, которая сможет:
В рамках результата исследования, выбор пал на ncform как на самое готовое решение. JSON schema требует минимальной кастомизации и её генерация будет практически нативной, есть поддержка Element UI, локализация ошибок возможна как через внедрение собственного описания при загрузке библиотеки, так и через минимальную правку исходного кода, текст ошибок валидации задаётся на уровне схемы, но конкретно эти участки должны подвергаться предобработке до генерации формы.
Если ваш выбор, как и выбор автора, остановится на ncform, то можно использовать данный fork: github и npm. В рамках него проделана работа по переводу ошибок от стандартных валидаторов на русский и английский языки из коробки, расширена функциональность визуальных компонентов Element UI, исправлена работа некоторых валидаторов, например, для списковых объектов с типом array.
Автор надеется, что данная статья хотя бы немного сможет облегчить муки выбора при аналогичной ситуации, и вы сможете найти подходящее вам решение за меньшее время.
Работа с формами
Типичное использование
Для двунаправленного связывания данных с элементами форм можно использовать директиву v-model. В зависимости от типа элемента автоматически выбираеся способ обновления элемента.
v-model игнорирует атрибуты value, checked или selected на любых элементах форм. Данные экземпляра будут рассматриваться как источник истины. Начальное значение нужно объявить на стороне JavaScript, внутри опции data компонента.
Текст
Многострочный текст
Внутри тега textarea интерполяция () не будет работать. Для этого нужно использовать директиву v-model
Чекбоксы
Один чекбокс, привязанный к boolean значению:
Множество чекбоксов, привязанных к одному массиву:
Радиокнопки
Выпадающие списки
Выбор одного варианта из списка:
Если начальное значение выражения v-model не соответствует вариантам списка, элемент
Выбрано: << selected >>
Динамическое отображение опций с помощью v-for :
Связывание значений
Для радиокнопок, чекбоксов и выпадающих списков выбора в качестве параметров v-model обычно указываются статические строки:
Для связывания значений с динамическим свойством экземпляра Vue, используйте v-bind
Чекбокс
Радиокнопки
Списки выбора
Модификаторы
.lazy
По умолчанию, v-model синхронизирует ввод с данными на каждое событие input. Можно указать модификатор lazy, чтобы вместо этого использовать для синхронизации события change:
.number
Чтобы автоматически привести введенные пользователем данные к числу, нужно добавить модификатор number:
.trim
Чтобы автоматически обрезать пробелы в начале и в конце введённой строки, используйте модификатор trim:
Использование v-model с компонентами
Компоненты Vue позволяют создавать пользовательские аналоги элементов ввода с настраиваемым поведением, которые тоже могут работать с директивой v-model.
Шаблоны динамических компонентов с помощью Vue.js
Дата публикации: 2018-07-18
От автора: динамические компоненты не всегда имеют одинаковую структуру. Иногда нам необходимо управлять многими различными состояниями. Это может быть полезно сделать асинхронно.
Пример использования
Шаблоны компонентов используются в Scrumpy в нескольких местах: уведомления, комментарии и вложения. Давайте рассмотрим комментарии, чтобы понять, что я на самом деле подразумеваю под этим.
Комментарии — это теперь не просто текстовые поля. Вы ожидаете, что сможете размещать в них ссылки, загружать изображения, встраивать видео и многое другое. Все эти совершенно разные элементы должны быть представлены в этом комментарии. Если вы попытаетесь сделать это в рамках одного компонента, он может быстро стать абсолютным беспорядочным.
Наиболее распространенные превью для ссылок — данные open graph, изображения и видео
Фреймворк VUE JS: быстрый старт
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Как мы можем справиться с этой проблемой? Вероятно, большинство людей будут проверять все случаи и после этого загружать определенные компоненты. Что-то вроде этого:
