Vue V Model V Bind

Posted on  by admin
I'm learning Vue with an online course and the instructor gave me an exercise to make an input text with a default value.

I completed it using v-model but, the instructor chose v-bind:value and I don't understand why. Can someone give me a simple explanation about the difference between these two and when it's better use each one?

7474 bronze badges. 3,43122 gold badges1010 silver badges66 bronze badges. 1010 silver badges66 bronze badges. From here -Remember:.

is essentially the same as:. or (shorthand syntax):. So v-model is a two-way binding for form inputs. It combines v-bind, which brings a js value into the markup and v-on:input to update the js value. The js value must be present in your data, or in an inject. Use v-model when you can. Use v-bind/v-on when you must :-) I hope your answer was accepted.

Modifiers

v-model with Components

works with all the basic HTML input types (text, textarea, number, radio, checkbox, select).

v-modelworks with all the basic HTML input types (text, textarea, number, radio, checkbox, select). You can use v-model with input type=date if your model stores dates as ISO strings (yyyy-mm-dd).

If you want to use date objects in your model (a good idea as soon as you're going to manipulate or format them), do this.
El MacEl Mac
2,957
1

v-model also has modifiers .lazy, .trim, .number, covered in the doc. 1111 gold badges6666 silver badges9999 bronze badges. 9999 bronze badges. In simple wordsv-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. but v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.

check out this simple example: https://jsfiddle.net/gs0kphvc/.

9999 bronze badges. 1,80811 gold badge1111 silver badges1717 bronze badges.

1111 silver badges1717 bronze badges. v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. But v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.

v-model is intended to be used with form elements. It allows you to tie the form element (e.g.

Harshal PatilHarshal Patil
14.2k2

Not the answer you're looking for? Browse other questions tagged vue.js or ask your own question.