v-model Vue. Связь данных и представления.

Альтернатива value + событие

Ранее мы с вами рассматривали следующий способ, как можно организовать связь между нашим компонентом (в данном случае это компонент input) и родительским компонентом т.е. компонентом, в котором происходит разработка и его уровнем данных.

<template>

   <div>

       <input :value="number" @input="number = $event.target.value">

   </div>

</template>




<script>

export default {

 name: "mainVue",

 data() {

   return {

     number: 1

   }

 }

}

</script>

То есть как это у нас происходило? Благодаря атрибуту value мы с вами передавали значение ключа number из уровня данных нашего родительского компонента и соответственно с помощью события input, когда изменились данные этого компонента, мы изменяли значение number на уровне данных.

Получилась такая двухсторонняя связь между дочерним компонентом input и родительским компонентом, в котором это всё находится. 

Но, существует более сокращенная форма записи, как мы можем организовать такую двухстороннюю связь. Для этого вместо этой длинной конструкции value и input мы можем воспользоваться следующим следующей директивой v-model. 

Далее просто указываем тот ключ, для которого нужно организовать двухстороннюю связь. 

Если я теперь буду менять данные на уровне представления, они меняются и на уровне данных. 

Понятие v-model

То есть v-model - это модель компонента. Оно представляет собой какое-то состояние нашего компонента. То есть его конкретное значение.

В документация такая сокращенная форма записи называется "синтаксический сахар". По сути, мы можем либо воспользоваться такими атрибутами как value с комбинацией с каким-то событием на изменение этих данных. Либо мы можем воспользоваться такой сокращенной формой записи в виде v-model и, соответственно, задать модель данных для нашего компонента. 

Нужно понимать что v-model работает не только для элемента input, как в нашем примере. Это работает и для других элементов, которые могут присутствовать на нашей странице. Это такие элементы форм как select, radio переключатели, текстовые поля и так далее. 

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

То есть мы указываем их конкретное значение, которое они будут принимать - модель этих компонентов.

Также v-model можно применять и для своих компонентов, которые вы будете разрабатывать в своём в приложении. Свои кастомные компоненты. Для них вы тоже можете создать и настроить v-model, передавать туда и обрабатывать этот v-model. Это мы уже посмотрим более подробно, когда будем разбираться с компонентами. 

Сейчас же просто нужно понимать что такое у нас может иметь место быть. 

Понятие множественного v-model

Кроме того, у v-model может быть несколько состояний. Некоторые компоненты поддерживают такую структуру, когда может задаваться более одного значения.

Для этого каждый из ключей для которых есть возможность настройки мы можем указывать их через двоеточие. Например, v-model:title и v-model:count.

То есть, как настроит разработчик, так оно и будет у нас. У нас есть такая возможность. Это называется множественный v-model и такое тоже может иметь место быть. 

По сути v-model - это просто состояние, модель компонента и как бы такой "синтаксический сахар" для связи между уровнем данных и уровнем представления, чтобы данные у нас были соответственно связаны (двухстороннее связывание).