Скачать или смотреть Vue.js Tutorial #11 Form Input Bindings in Vue.js

Vue.js Tutorial
#11 Form Input Bindings in Vue.js

Prepared By:
Renjith VK (https://github.com/renjithspace)
Rahul TP (https://github.com/rahulspace)

Support on Patreon:   / codebeans  


Vue provides a directive called 'v-model' to create a two-way binding on form inputs. Let's see it in action.

Create a data called title and set its initial value to empty string. Create two input fields and bind the title to the 'v-model' directive. Run it and input some text. Yes, you can see its reactive and two-way bound.

Please note, the 'v-model' directive will ignore the initial values of 'value', 'checked' and 'selected' attributes. So we will have to set the initial value of an input to the data that bind to 'v-model'. Let's see in action.

Create some data 'name', 'hasPassport' and 'level'. Create an input field and set a value. Create a checkbox and set it as checked. Create a select box with options and set one of them as selected. Here we testing value, checked and selected attributes. Here you can see the initial values we had set is working. Let's bind 'v-model' and run it. Yes there is no effect of setting initial values of 'value', 'checked' and 'selected' attributes, the v-model is ignoring those.

Let's remove those attributes and set the initial values in data. Yes, it working.

The 'v-model' directive uses different properties and events for different form input elements. Let's take a took at it.

'text' and 'textarea' elements use 'value' property and 'input' event.
'checkboxes' and 'radio buttons' use 'checked' property and 'change' event.
select fields use 'value' property and 'change' event.

Let's check how to do the input binding of text fields.

Create a data called 'name'. Create an input field and bind the name to 'v-model'. Run it and input some text. Check the name from the console. Yes, the name is updated.

Let's see how to do the input binding of multiline text fields.

Create a data called 'message'. Create a textarea and bind the message to 'v-model'. Run it and enter some text. Check the message from the console. Yes, the message is updated.

Let's see how to do the input binding of checkboxes.

Create a data called 'isAccept' and set its value to false. Create a checkbox field and bind 'isAccept' to 'v-model'. Check the field and find the value of 'isAccept' from the console. Yes, the 'isAccept' value updated to true.

We can bind an array to the 'v-model' directive if we have multiple checkboxes. Let's check it.

[video 6]
Create a data called 'packages' and set its value to an empty array. Create some checkboxes with the value of 'gold', 'silver' and 'bronze' and bind the 'packages' to v-model. Run it and check. Yes, the value of 'packages' updating.

Let's see how to do input binding on radio buttons.

Create a data called 'location'. Create some checkboxes with value as city names and bind the 'location' to the v-model. Run it and check. Yes, the location is updating.

Let's check how to do the input binding of select fields.

Create a data called 'role'. Create a select field and some options with value. Run it and check. Yes, 'role' is updating.

We can bind an array to the 'v-model' directive if we have multiple select. Let's check it.

Update the role data to roles and set its initial value to empty array instead of the empty string. Bind the roles to select and set multiple. Run it and check. Yes, the selected roles are updating to an array.

Value Binding:
We can use the 'v-bind' directive to dynamically bind the value of radio buttons and select field options. And we can use two special attributes such as 'true-value' and 'false-value' to bind checkbox's toggle values. Let's see it in action.

Create a data called 'color'. Set default value to 'red' and picked value to an empty string. Create a radio button and set the value to the default color and bind picked color to 'v-model'. Run it and check. Yes, the picked color is updated with the default value.

Create a data called 'locations' with a collection of locations. Create a data called selected. Create a select field and bind 'selected' to the v-model. Create options. Loop through locations and bind location. Run it and check. Yes, the options are rendered and 'selected' value is updated to 'London'.

Create a data called 'isReady' and set its value to 'nope'. Create a checkbox. Set 'true-value' to 'yup' and 'false-value' to 'nope'. Bind isReady to v-model. Run it and check. Yes, isReady update to the true-value, 'yup'.

Modifiers:
Vue provides a few modifiers such as 'lazy', 'number' and 'trim' to modify default behaviors of input binding.

By default, the text and multiline field's 'v-model' bound data will sync in the input event. That means when we input each character to the field it will sync to 'v-model' data.