Vue Form Inputs
On the Vue Forms and v-model pages previously in this course, we have seen a few samples of form inputs.
More Vue form input examples, including radio buttons, checkboxes, drop-down menus, and standard text input fields, are gathered on this page.
Radio Buttons
Only one radio button can be selected at a time because buttons that are part of the same choice must have the same name.
The radio button input value is captured using v-model, much like with all other inputs in Vue, but the <input type=”radio”> tag also needs to have its value property explicitly set.
In a Vue form, radio buttons can be used as follows:
Example
App.vue:
<template>
<h1>Radio Buttons in Vue</h1>
<form @submit.prevent="registerAnswer">
<p>What is your favorite animal?</p>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Cat"> Cat
</label>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Dog"> Dog
</label>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Turtle"> Turtle
</label>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Moose"> Moose
</label>
<button type="submit">Submit</button>
</form>
<div>
<h3>Submitted choice:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inpVal: '',
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
if(this.inpVal) {
this.inpValSubmitted = this.inpVal;
}
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button {
margin: 10px;
}
label {
display: block;
width: 80px;
padding: 5px;
}
label:hover {
cursor: pointer;
background-color: rgb(211, 244, 211);
border-radius: 5px;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
Checkboxes
The values for the ticked checkboxes are collected in the array when checkbox inputs (<input type=”checkbox”>) are linked to the same array with v-model:
Example
App.vue:
<template>
<h1>Checkbox Inputs in Vue</h1>
<form @submit.prevent="registerAnswer">
<p>What kinds of food do you like?</p>
<label>
<input type="checkbox" v-model="likeFoods" value="Pizza"> Pizza
</label>
<label>
<input type="checkbox" v-model="likeFoods" value="Rice"> Rice
</label>
<label>
<input type="checkbox" v-model="likeFoods" value="Fish"> Fish
</label>
<label>
<input type="checkbox" v-model="likeFoods" value="Salad"> Salad
</label>
<button type="submit">Submit</button>
</form>
<div>
<h3>Submitted answer:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
likeFoods: [],
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
this.inpValSubmitted = this.likeFoods;
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button {
margin: 10px;
}
label {
display: block;
width: 80px;
padding: 5px;
}
label:hover {
cursor: pointer;
background-color: rgb(211, 244, 211);
border-radius: 5px;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
Drop-down List
A drop-down list is made up of <option> tags enclosed in a <select> tag.
Given values to the <option> tags, we must connect the <select> tag with v-model when utilizing a drop-down list in Vue:
Example
App.vue:
<template>
<h1>Drop-down List in Vue</h1>
<form @submit.prevent="registerAnswer">
<label for="cars">Choose a car:</label>
<select v-model="carSelected" id="cars">
<option disabled value="">Please select one</option>
<option>Volvo</option>
<option>Saab</option>
<option>Opel</option>
<option>Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
<div>
<h3>Submitted answer:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
carSelected: '',
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
if(this.carSelected) {
this.inpValSubmitted = this.carSelected;
}
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button {
margin: 10px;
}
label {
width: 80px;
padding: 5px;
}
label:hover {
cursor: pointer;
background-color: rgb(211, 244, 211);
border-radius: 5px;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
< select multiple >
The <select> tag’s multiple attribute expands the drop-down list so that we can select more than one choice.
The ‘ctrl’ and ‘cmd’ keys are required for Windows users to select several options, and respectively for Mac users.
We must link the <select> tag with the v-model and assign values to the <option> tags in order to use <select multiple> in Vue:
Example
App.vue:
<template>
<h1>Select Multiple in Vue</h1>
<p>Depending on your operating system, use the 'ctrl' or the 'command' key to select multiple options.</p>
<form @submit.prevent="registerAnswer">
<label for="cars">Choose one or more cars:</label><br>
<select v-model="carsSelected" id="cars" multiple>
<option>Volvo</option>
<option>Saab</option>
<option>Opel</option>
<option>Audi</option>
<option>Kia</option>
</select>
<button type="submit">Submit</button>
</form>
<div>
<h3>Submitted answer:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
carsSelected: [],
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
if(this.carsSelected) {
this.inpValSubmitted = this.carsSelected;
}
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button, select {
margin: 10px;
display: block;
}
label {
width: 80px;
padding: 5px;
}
label:hover {
cursor: pointer;
background-color: rgb(211, 244, 211);
border-radius: 5px;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
Read Only Form Inputs
When form inputs are used with v-model, a two-way binding is established; that is, when the Vue data instance changes, the input value attribute changes as well.
We are unable to use v-model for read-only form inputs, such as <input type=”file”>, because the value attribute cannot be modified from the Vue data instance.
To update the Vue data instance for read-only form inputs like as <input type=”file”>, we must use @change to invoke a method:
Example
App.vue:
<template>
<h1>Input Type File</h1>
<form @submit.prevent="registerAnswer">
<label>Choose a file:
<input @change="updateVal" type="file">
</label>
<button type="submit">Submit</button>
</form>
<div>
<h3>Submitted answer:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
fileInp: null,
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
if(this.fileInp) {
this.inpValSubmitted = this.fileInp;
}
},
updateVal(e) {
this.fileInp = e.target.value;
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button {
margin: 10px;
display: block;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
Information: The file path C:\fakepath\ appears before the provided file name in the example above. This keeps dangerous malware from figuring out the file system of the user.
Other Form Inputs
In contrast to the form inputs listed before, where we were required to supply a value for the value attribute, the form inputs listed below allow the user to supply the value:
- <input type=”color”>
- <input type=”date”>
- <input type=”datetime-local”>
- <input type=”number”>
- <input type=”password”>
- <input type=”range”>
- <input type=”search”>
- <input type=”tel”>
- <input type=”text”>
- <input type=”time”>
- <textarea>
For this type of form input, the user provides the value already; thus, in Vue, all that’s required is connecting the input to a data property using v-model.
Using <input type=”range”> in Vue is as follows:
Example
App.vue:
<form @submit.prevent="registerAnswer">
<label>How tall are you?<br>
<input v-model="heightInp" type="range" min="50" max="235"> {{ heightInp }} cm
</label>
<button type="submit">Submit</button>
</form>
And here’s how you utilize Vue with <input type=”color”>:
Example
App.vue:
<form @submit.prevent="registerAnswer">
<label>Choose a color:
<input v-model="colorInp" type="color">
</label>
<button type="submit">Submit</button>
</form>
Moreover, this is how Vue uses <textarea>:
Example
App.vue:
<form @submit.prevent="registerAnswer">
<label>
<p>What do you think about our product?</p>
<textarea v-model="txtInp" placeholder="Write something.." rows="4" cols="35"></textarea>
</label>
<button type="submit">Submit</button>
</form>
