JAVASCRIPT
Mastering Vue 3 `v-model` with Native Form Inputs
Explore the versatile usage of Vue 3's `v-model` directive for two-way data binding with various native HTML form elements like text inputs, checkboxes, radio buttons, and select dropdowns.
<script setup>
import { ref } from 'vue';
const textInput = ref('Hello Vue!');
const checkboxChecked = ref(true);
const selectedOptions = ref([]); // For multiple select or multiple checkboxes
const radioSelection = ref('optionA');
const selectSelection = ref('vue');
const multiselectSelection = ref(['vue']); // For <select multiple>
</script>
<template>
<div>
<h1>Vue 3 `v-model` with Native Inputs</h1>
<section>
<h2>Text Input</h2>
<input type="text" v-model="textInput" placeholder="Enter text">
<p>Value: {{ textInput }}</p>
</section>
<section>
<h2>Checkbox</h2>
<label>
<input type="checkbox" v-model="checkboxChecked">
I agree to the terms
</label>
<p>Checked: {{ checkboxChecked }}</p>
<h3>Multiple Checkboxes</h3>
<div>
<label><input type="checkbox" v-model="selectedOptions" value="apple"> Apple</label>
<label><input type="checkbox" v-model="selectedOptions" value="banana"> Banana</label>
<label><input type="checkbox" v-model="selectedOptions" value="orange"> Orange</label>
</div>
<p>Selected Fruits: {{ selectedOptions }}</p>
</section>
<section>
<h2>Radio Buttons</h2>
<div>
<label><input type="radio" v-model="radioSelection" value="optionA"> Option A</label>
<label><input type="radio" v-model="radioSelection" value="optionB"> Option B</label>
</div>
<p>Selected: {{ radioSelection }}</p>
</section>
<section>
<h2>Select Dropdown</h2>
<select v-model="selectSelection">
<option disabled value="">Please select one</option>
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
</select>
<p>Selected Framework: {{ selectSelection }}</p>
<h3>Multiple Select</h3>
<select v-model="multiselectSelection" multiple>
<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
<option value="svelte">Svelte</option>
</select>
<p>Selected Frameworks (Multiple): {{ multiselectSelection }}</p>
</section>
</div>
</template>
<style scoped>
section {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #eee;
border-radius: 8px;
}
h2 {
margin-top: 0;
color: #34495e;
}
label {
margin-right: 15px;
display: inline-flex;
align-items: center;
}
input[type="checkbox"], input[type="radio"] {
margin-right: 5px;
}
select {
padding: 8px;
border-radius: 4px;
border: 1px solid #ccc;
}
</style>
How it works: This snippet illustrates the versatility of Vue 3's `v-model` directive when used with various native HTML form inputs. It demonstrates two-way data binding for a text input, a single checkbox, multiple checkboxes (binding to an array), radio buttons, a single select dropdown, and a multiple select dropdown. Each `v-model` automatically handles updating the reactive `ref` variable when the input changes and updating the input's value when the `ref` changes, simplifying form management for different input types without manual event listeners or value bindings.