V Bind Model

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?

Two-way data binding in Vue.js

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.

Binding to Text Input Elements

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

v-model with Components

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. v-model has some extra smarts that it's good to be aware of. If you're using an IME ( lots of mobile keyboards, or Chinese/Japanese/Korean ), v-model will not update until a word is complete (a space is entered or the user leaves the field).

Input binding