Работа с формами

  • 5 мин

Данные, возвращаемые функцией data() в приложении или компоненте Vue, обычно называются состоянием. Состояние — это любая информация, которую приложение должно отслеживать для выполнения необходимых операций. Обычно пользователи изменяют состояние через HTML-формы. Vue.js позволяет привязывать данные к форме, чтобы пользователи могли обновлять состояние.

v-model

Директива v-model создает двустороннюю привязку между элементом управления HTML и связанными данными. Таким образом, при обновлении значения в форме оно обновляется в состоянии приложения. Директива v-model поддерживает привязку к любому элементу управления формы, включая флажки, текстовые поля и раскрывающиеся списки.

Примечание.

Директива v-bind создает одностороннюю привязку. Поэтому любые изменения, вносимые пользователем в форму, не хранятся в состоянии.

Для всех примеров в этом уроке используется следующее приложение Vue.

Vue.createApp({
    data() {
        return {
            name: 'Cheryl',
            status: -1,
            active: true,
            benefitsSelected: 'yes',
            statusList: [
                'full-time',
                'part-time',
                'contractor'
            ]
        }
    }
})

Привязка к текстовым полям

Для привязки к текстовому полю используется директива v-model.

<input type="text" v-model="name" />

Свойство name обновляется при каждом изменении значения текстового поля. Если вы хотите использовать textarea, синтаксис будет таким же — вы используете v-model="name", как и ранее.

Привязка к флажкам

Как правило, логические значения привязываются к флажкам. Флажки позволяют включать параметр. Чтобы привязать параметр active, можно использовать v-model, как и раньше.

<input type="checkbox" v-model="active" /> Is active

Иногда переключатель не является логическим значением. Вместо этого у вас могут быть два варианта, например Да и Нет. В этом случае можно использовать true-value и false-value для указания связанного значения для выбранного (true) или невыбранного (false) флажка.

<input type="checkbox" v-model="benefitsSelected" true-value="yes" false-value="no"> Benefits selected: {{ benefitsSelected }}

В HTML раскрывающиеся списки создаются в двух частях. Вы используете select для создания списка и option для добавления параметров. Тег select сохраняет выбранное значение раскрывающегося списка, поэтому его можно использовать для привязки к модели.

В Vue необходимо:

  • Создать список вариантов. Чтобы создать список элементов option, используйте v-for для циклического прохода и создайте элемент варианта для каждого элемента в массиве.

  • Определить значение. Для каждого создаваемого варианта необходимо задать значение. Если список является просто массивом строк, следует сохранить строку или выбранный индекс как значение. Приведем пример:

    <select v-model="selectedIndex">
   <option v-for="(stringItem, index) in arrayOfStrings" :value="index"> 
   {{}}
   </option>
</select>

    Если в списке хранится массив объектов, укажите свойство отображения и место поиска значения.

    <select v-model="selectedValue">
   <option v-for="item in items" :value="item.value">
   {{ item.displayProperty }}
   </option>
</select>

  • Следить за выбранным значением. Вы можете привязать выбранное значение к тегу select с помощью v-model. Здесь можно отслеживать либо индекс, либо значение элемента. Выбор за вами.

Чтобы создать список вариантов, используйте v-for для циклического прохода по списку. Затем задайте значение в качестве индекса элемента в массиве. Вы используете v-for(status, index) in statusList для предоставления индекса для каждого элемента. Затем задайте для :value каждого варианта значение index и отобразите status в качестве варианта для пользователя.

<select v-model="statusIndex">
    <!-- Create a message to select one -->
    <option disabled value="">Please select one</option>
    <!-- Use v-for to create the list of options -->
    <option v-for="(status, index) in statusList" :value="index">
        {{ status }}
    </option>
</select>

Наконец, добавьте v-model="statusIndex", чтобы гарантировать, что когда пользователь выбирает элемент, значение свойства данных statusIndex обновляется до выбранного индекса.