Работа с input, checkbox, textarea, radio, select, директива v-model в Vue

1. Работа с input, подробнее
2. Работа с checkbox, подробнее
3. Работа с textarea, подробнее
4. Работа с radio, подробнее
5. Работа с select, подробнее

Работа с input

Сейчас мы научимся работе с инпутами в фреймворке Vue. С их помощью мы будем реактивно добавлять данные на страницу.

Мы можем связать свойство message и инпут таким образом, чтобы изменение любого из них приводило к изменению другого. Это делается с помощью директивы v-model, в которой указывается свойство, привязанное к инпуту:

App.vue<template>
    <input v-model="message">
</template>

Пусть также у нас есть свойство message:

App.vuedata()
{
    return {
        message: 'hello',
    }
}

После запуска кода в инпуте будет стоять текст свойства message. А если поредактировать данные в инпуте — свойство также изменится соответствующим образом. Чтобы увидеть это, давайте выведем введенное в инпут содержимое где-нибудь в абзаце:

App.vue<template>
    <input v-model="message">
    <p>{{ message }}</p>
</template>

Работа с textarea

Работа с textarea происходит абсолютно также, как и с инпутами — через директиву v-model. Давайте посмотрим на практике. Сделаем свойство, которое будем привязывать к нашему тегу:

App.vuedata()
{
    return {
        text: '',
    }
}

Привяжем свойство к тегу и сделаем абзац, в который будет выводиться вводимый текст:

App.vue<template>
    <textarea v-model="text"></textarea>
    <p>{{ text }}</p>
</template>

Работа с checkbox

Давайте теперь посмотрим, как происходит работа с checkbox. Пусть у нас есть следующий переключатель:

App.vue<template>
    <input type="checkbox" v-model="checked">
</template>

Сделаем свойство checked, которое будет управлять работой этого checkbox:

App.vuedata()
{
    return {
        checked: true,
    }
}

Если checkbox отмечен — свойство checked будет иметь значение true, а если не отмечен — то false. Чтобы убедится в этом, можно вывести значение свойства на экран:

App.vue<template>
    <input type="checkbox" v-model="checked">
    <p>{{ checked }}</p>
</template>

С помощью тернарного оператора можно выводить что-нибудь более осмысленное:

App.vue<template>
    <input type="checkbox" v-model="checked">
    <p>{{ checked ? 'yes' : 'no' }}</p>
</template>

Массив значений

Пусть у нас есть группа checkbox. Можно сделать так, чтобы значение атрибутов value всех отмеченных чекбоксов складывалось в массив. Для этого нужно к v-model этих checkbox привязать массив. Давайте сделаем это. Объявим свойство с массивом:

App.vuedata()
{
    return {
        arr: [],
    }
}

Привяжем этот массив к группе checkbox:

App.vue<template>
    <input type="checkbox" v-model="arr" value="v1">
    <input type="checkbox" v-model="arr" value="v2">
    <input type="checkbox" v-model="arr" value="v3">
</template>

Работа с radio

Работа с radio происходит аналогичным образом. Давайте посмотрим на практике. Для начала сделаем свойство choice, которое мы будем привязывать к группе radio:

App.vuedata()
{
    return {
        choice: '',
    }
}

Сделаем теперь группу radio, напишем каждой из них директиву v-model и привяжем к ней свойство choice. Дадим также каждой из них свой value:

App.vue<template>
    <input name="radio" type="radio"
        v-model="choice"
        value="v1">
    <input name="radio" type="radio"
        v-model="choice"
        value="v2">
    <input name="radio" type="radio"
        v-model="choice"
        value="v3">
</template>

Теперь в свойстве choice всегда будет лежать value отмеченного radio:

App.vue<template>
     you choosed: {{ choice }}
</template>

Работа с select

Работа с select осуществляется аналогично — на тег вешается атрибут v-model, к нему привязывается свойство объекта data. В это свойство будет попадать текст выбранного тега option.

Следующий код демонстрирует пример работы выпадающего списка:

App.vuedata()
{
    return {
        // значение по умолчанию
        selected: 'value1',
    }
}

App.vue<template>
    <select v-model="selected">
        <option>value1</option>
        <option>value2</option>
        <option>value3</option>
    </select>

    <p>{{ selected }}</p>
</template>

Формирование select в цикле

Теги option можно также создавать не в ручную, а с помощью цикла:

App.vuedata()
{
    return {
        selected: 'value1',
        options: ['value1', 'value2', 'value3'],
    }
}

App.vue<template>
    <select v-model="selected">
        <option v-for="option in options">{{ option }}</option>
    </select>

    <p>{{ selected }}</p>
</template>