Suggest an editImprove this articleRefine the answer for “What is two-way data binding?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Two-way data binding** is a mechanism where **the data in the model and the display in the interface automatically stay in sync with each other**. **Key point:** if the user changes a value in the UI, the component's data changes, and if the component's data changes, the UI updates automatically; in Vue this mechanism is implemented through the `v-model` directive.Shown above the full answer for quick recall.Answer (EN)Image**Two-way data binding** is a mechanism where **the data in the model and the display in the interface automatically stay in sync with each other.** In other words: > **If the user changes a value in the UI -> the data in the component changes.** > **If the data in the component changes -> the UI updates automatically.** In Vue this mechanism is implemented through the `v-model` directive. --- ## A simple example ```html <input v-model="name"> <p>{{ name }}</p> ``` If the user types text: ``` name = "Alex" ``` If you change the variable in code: ```js this.name = "John" ``` - the value in the input updates too. This is two-way binding. --- ## How it works under the hood Vue turns: ```html <input v-model="name"> ``` into two mechanisms: 1. **One-way binding (model -> view):** ```html :value="name" ``` 2. **Reverse binding (view -> model):** ```html @input="name = $event.target.value" ``` Vue automatically combines this into convenient syntax. --- ## What does two-way binding give you? #### Saves code You don't have to write `input`, `change`, `keyup` handlers by hand. #### Simplifies forms Especially multi-field ones, like validations. #### A synchronized UI The UI always shows the current data. --- ## Two-way binding in components (Vue 3) ```html <MyInput v-model="value" /> ``` It works through: - a prop: `modelValue` - an event: `update:modelValue` The component: ```vue <script> export default { props: ['modelValue'], emits: ['update:modelValue'] } </script> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"> </template> ``` --- ## Difference from one-way binding | Binding type | What it does | |---|---| | one-way | Updates only the UI when the data changes | | two-way | The UI and the data update each other | Example of one-way: ```html <input :value="name"> ``` The UI cannot be used to change the model.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.