Beginner LevelVue JS
How does v-model create two-way data bindings on form input elements?
❓ Interview Prompt: Explain two-way form binding with v-model, input types (text, checkbox, radio, select), and modifiers (.trim, .number, .lazy).
'v-model' provides two-way data binding between form inputs and Vue reactive state.
How it Works Under the Hood:
'v-model' is syntactic sugar combining attribute binding and event handling:
•
Text inputs: ':value="text"' + '@input="text = $event.target.value"'
•
Checkboxes/Radios: ':checked="val"' + '@change="val = $event.target.checked"'
Built-in Modifiers:
•
'.lazy': Syncs state after 'change' events (on blur) instead of every 'input' keystroke.
•
'.number': Automatically casts user input string to a JavaScript number.
•
'.trim': Automatically trims whitespace from input string.
Code Implementation Example
html
<script setup>
import { ref } from 'vue';
const username = ref('');
const age = ref(25);
const isAgreed = ref(false);
</script>
<template>
<!-- 1. Text input with .trim modifier -->
<input v-model.trim="username" placeholder="Username" />
<!-- 2. Number input with .number modifier -->
<input v-model.number="age" type="number" />
<!-- 3. Checkbox boolean binding -->
<label>
<input type="checkbox" v-model="isAgreed" /> I Agree
</label>
</template>💡Two-way form data binding using v-model and input modifiers.
🎯 Interview Key Takeaway
v-model provides two-way data binding on form inputs, supporting .trim, .number, and .lazy modifiers.
#v-model#Forms#Two-Way Binding#Beginner
Back to all Vue JS Questions→