Preamble
v-model is a function that is used a lot when creating forms using Vue.js. You can use v-model to create two-way data constraints on input boxes or textarea or even files. It will automatically select the correct way to update elements based on the input type. Although when using it, you will find it a little magic, but v-model is really an indispensable syntax every time you want to handle a form in a convenient and delicious way ? Note: v-model will ignore the The initial value, “checked” or “selected” attribute is found on any form elements. It will always treat Vue instance data as always true data. You should declare the initial value on the Javascript side of the components.
Operation of v-model
v-model is a syntax sugar (sweet-looking syntax) to write v-on and v-bind together in one line. Overview, the following two lines perform the same operation:
1 2 3 | <input v-model="searchText"> <input :value="searchText" @change="searchText = $event.target.value"> |
Custom components of v-model In the case of using v-model for custom components, by default props are called values and events of the input used. This value can be changed by definition on the custom component side.
The following example is excerpted from the official reference page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | Vue.component('my-checkbox', { model: { prop: 'checked', event: 'change' }, props: { // Tùy theo điều này, cho phép sử dụng thuộc tính `value` với mục đích riêng biệt. value: String, // `checked` sẽ được sử dụng như thuộc tính thay thế `value` checked: { type: Number, default: 0 } }, // ... }) |
Common mistakes
Both v-model and @change V-model as mentioned above are Event handling. So it is not necessary to combine writing twice using v-model and @change , and making the code Not Syntax Suger. For example, the code below.
// The error code
1 2 | <input v-model="searchText" @change="(value) => searchText = value"> |
Since the v-model itself already has Event handling for the @change event, the event for change is repeated twice. If we want to handle more events than a change event, we should use v-model and use v-bind and v-on simultaneously or replace the searchText property. .
// Standard code Syntax Suger
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <input v-model="searchText"> <script> data(){ return { innerSearchText: '' } }, computed: { searchText: { get () { return this.innerSearchText }, set (value) { this.innerSearchText = value } } } </script> |
// Standard code Syntax Suger
1 2 3 4 5 6 7 8 9 | <input :value="searchText" @change="onChange"> <script> data(){ return { searchText: '' } } </script> |
The combination of v-model and set motivates the development of cases combined with Vuex with many other content.
Passing the props to v-model For the v-model variable, if you want to make a bridge and tell the props, you see a lot. But if you use this, a warning error will be displayed because the props are changed directly.
<! – Error code snippet ->
1 2 3 4 5 6 7 | <input v-model="searchText"> # Cảnh báo sẽ được hiển thị vì v-model thực thi searchText = $event.taget.value <script> props: { searchText: String } </script> |
Also, to use this error, defining data from the props value will produce the same error. For example, the code below:
<! – Error code snippet ->
1 2 3 4 5 6 7 8 9 10 11 12 | <input v-model="searchTextData"> <script> props: { searchText: String }, data() { return { searchTextData: this.$props.searchText } } </script> |
This code snippet looks like it works properly. But in fact, after the props value is initialized, the values between the props and data will not be synchronized. Therefore, despite the fact that it has been used in new code, the repair is still not performed properly.
So how to avoid it? Using calculated properties can be overcome.
<! – Syntax Suger standard code ->
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <input v-model="innerSearchText"> <script> props: { searchText: String }, computed: { innerSearchText: { get () { return this.$props.searchText }, set (value) { this.$emit('change', value) } } } </script> |
overview
That is, instead of assigning a value in this component, it will send a value as an event to the parent component. And by rewriting the value of the props on the parent element, this component can be used correctly. There is also a method of using watch instead of setter, but I don’t recommend it personally because the data stream is very difficult to see.