v-model

up:: Vue Directives Often you need to store the value of an input html element in a vue data object (Vue Data Binding). That same data you need to manipulate through Vue Methods.

For example, if you have an input element that you want to clear. You set the value of the input to the “entered” variable using v-bind. Once a button is pressed, you set “entered” to an empty string, thus clearing the input element.

This two way binding is so common, Vue has a built in directive for it.

<input type="text" v-model="name">
 
// A shorthand for
<input type="text" v-bind:"value" v-on:input="setValue">

Jargon

This is called “two-way binding”

Input

Input Number

When an input is a type=number it automatically converts the input to a JavaScript Number type. Getting the input via Vue Refs, it’s a String you get.

Dropdown

Also works.

Checkboxes and radio buttons

Add it on each html element and give it the same name v-model name. Make sure to have different value attributes. A single checkbox is a boolean. Multiple are an array.

Custom components

All v-model does is a shortcut for v-bind and v-on.

• Binds to modelValue
• Listens to update:modelValue