Vue.js 3.0 Tutorial
Vue.js 3.0 Component Advanced
Vue.js 3.0 Transitions & Animations
Vue.js 3.0 Reusable & Combinable
Vue.js 3.0 Advanced
Vue.js 3.0 Tools
Vue.js 3.0 Scale
Vue.js 3.0 Accessibility
Vue.js 3.0 Migrating from Vue2
Vue.js 3.0 Contribute Documentation
Vue.js 3.0 API References
Vue.js 3.0 Style Guide
Form input binding is a common requirement in web applications, and Vue 3 makes this easy with v-model.
v-model is a directive that creates 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.
Here's a basic example of form input binding with v-model:
<template>
<input v-model="message" />
<p>Message is: {{ message }}</p>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const message = ref('')
return {
message
}
}
}
</script>
In this example, message is a reactive reference that's bound to the input field. Whenever you type into the input field, message is automatically updated with the input's current value, and vice versa.
You can also use v-model with other form elements, like textarea and select:
<template>
<textarea v-model="message"></textarea>
<p>Message is: {{ message }}</p>
<select v-model="selectedOption">
<option v-for="option in options" :key="option" :value="option">{{ option }}</option>
</select>
<p>Selected option is: {{ selectedOption }}</p>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const message = ref('')
const selectedOption = ref('')
const options = ref(['Option 1', 'Option 2', 'Option 3'])
return {
message,
selectedOption,
options
}
}
}
</script>
This makes it really easy to create form bindings. Note that v-model in Vue 3.0 essentially translates to a v-bind for value and a v-on:input for updating the value.
Also, Vue's v-model can be used on components as well, acting as a shorthand for using props and emits for value synchronization, but that's a topic for another discussion.
Vue 3.0 v-model Directive for Form Input Binding:
v-model is a directive for two-way data binding on form input elements.<template>
<input v-model="message" />
<p>{{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: '',
};
},
};
</script>
Binding Input Values in Vue 3.0 Templates:
v-model.<template>
<input v-model="username" />
<p>{{ username }}</p>
</template>
<script>
export default {
data() {
return {
username: '',
};
},
};
</script>
Vue 3.0 Form Handling with v-model:
v-model for convenient form handling.<template>
<form @submit.prevent="submitForm">
<input v-model="username" />
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
};
},
methods: {
submitForm() {
// form submission logic
},
},
};
</script>
Vue 3.0 Input Value Synchronization:
v-model ensures synchronization between input and data.<template>
<input v-model="count" />
<p>{{ count }}</p>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
};
</script>
Vue 3.0 Dynamic Form Input Binding:
v-model.<template>
<input v-model="formData[key]" :placeholder="key" v-for="(value, key) in formData" :key="key" />
</template>
<script>
export default {
data() {
return {
formData: {
username: '',
email: '',
},
};
},
};
</script>
Vue 3.0 Form Validation with Input Binding:
v-model for form validation.<template>
<input v-model="username" :class="{ 'invalid': !isValid }" />
<p v-if="!isValid" class="error-message">Invalid username</p>
</template>
<script>
export default {
data() {
return {
username: '',
};
},
computed: {
isValid() {
// validation logic
return this.username.length > 3;
},
},
};
</script>
Vue 3.0 Checkbox and Radio Button Binding:
v-model.<template>
<input type="checkbox" v-model="isChecked" />
<p>{{ isChecked }}</p>
<input type="radio" value="option1" v-model="selectedOption" />
<input type="radio" value="option2" v-model="selectedOption" />
<p>{{ selectedOption }}</p>
</template>
<script>
export default {
data() {
return {
isChecked: false,
selectedOption: '',
};
},
};
</script>
Vue 3.0 Select Dropdown Binding:
v-model.<template>
<select v-model="selectedOption">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<p>{{ selectedOption }}</p>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
};
},
};
</script>
Vue 3.0 Input Binding with Computed Properties:
<template>
<input v-model="fullName" />
<p>{{ fullName }}</p>
</template>
<script>
export default {
data() {
return {
firstName: '',
lastName: '',
};
},
computed: {
fullName: {
get() {
return `${this.firstName} ${this.lastName}`;
},
set(value) {
const [firstName, lastName] = value.split(' ');
this.firstName = firstName;
this.lastName = lastName;
},
},
},
};
</script>
Vue 3.0 Input Binding and Reactivity:
v-model automatically react to changes.<template>
<input v-model="count" />
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
};
</script>
Handling Input Events in Vue 3.0 Forms:
<template>
<input v-model="username" @input="handleInput" />
<p>{{ username }}</p>
</template>
<script>
export default {
data() {
return {
username: '',
};
},
methods: {
handleInput(event) {
// custom input handling logic
},
},
};
</script>
Vue 3.0 Form Input Binding with Custom Components:
v-model with custom components for form input binding.<!-- CustomInput.vue -->
<template>
<input :value="value" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {
props: {
modelValue: String,
},
};
</script>
<!-- ParentComponent.vue -->
<template>
<CustomInput v-model="username" />
<p>{{ username }}</p>
</template>
<script>
import CustomInput from './CustomInput.vue';
export default {
data() {
return {
username: '',
};
},
components: {
CustomInput,
},
};
</script>