When dealing with forms on the frontend, we often need to sync the state of form input elements with corresponding state in JavaScript. It can be cumbersome to manually wire up value bindings and change event listeners:
A. By Checkbox
<template>
<form>
<label for="Apple">Apple</label>
<input type="checkbox" id="Apple" value="Apple" v-model="Fruits" />
<label for="Mango">Mango</label>
<input type="checkbox" id="Mango" value="Mango" v-model="Fruits" />
<label for="Banana">Banana</label>
<input type="checkbox" id="Banana" value="Banana" v-model="Fruits" /> <br/>
<h3>Your Select Fruits Are: {{ Fruits }}</h3>
</form>
</div>
</template>
<script>
export default {
name: "HeaderComponent",
data() {
return {
Fruits : []
}
}
}
</script>
B. By Radio Button
<template>
<form>
<h3>My Favurate Fruit is: </h3>
<label for="Apple">Apple</label>
<input type="radio" name="fruit" id="Apple" value="Apple" v-model="Fruits" />
<label for="Mango">Mango</label>
<input type="radio" name="fruit" id="Mango" value="Mango" v-model="Fruits" />
<label for="Banana">Banana</label>
<input type="radio" name="fruit" id="Banana" value="Banana" v-model="Fruits" /> <br/>
<h3>Your Select Fruits Are: {{ Fruits }}</h3>
</form>
</div>
</template>
<script>
export default {
name: "HeaderComponent",
data() {
return {
Fruits : ''
}
}
}
</script>
