V Bind Vue Js

Posted on  by admin

You’re browsing the documentation for v2.x and earlier. For v3.x, click here. You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements.

  • It automatically picks the correct way to update the element based on the input type.

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

Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. v-model will ignore the initial value, checked, or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth.

You should declare the initial value on the JavaScript side, inside the data option of your component.

Value Bindings

v-model internally uses different properties and emits different events for different input elements:.

v-model with Components

text and textarea elements use value property and input event;. checkboxes and radiobuttons use checked property and change event;. select fields use value as a prop and change as an event. For languages that require an IME (Chinese, Japanese, Korean, etc.), you’ll notice that v-model doesn’t get updated during IME composition.

If you want to cater to these updates as well, use the input event instead. Message is: {{ message }}. Interpolation on textareas () won't work. Use v-model instead.