Author: Dawid Adach
In this lesson, we will learn how to deal with Inputs. Inputs are very widely used components in web development. We use them everywhere, starting with the login form, newsletter subscription forms, a new post editor through toconfiguration panels etc.
Just follow the steps below.
- Import mdbInput and mdbTextarea to
App.vue
- Add a new newValues: [] array to data()
- Replace the modal body with the following code
- Add the handleInput function
- Add the addEvent() function:
- Add @click.native="addEvent" to the Add button in modal footer:
import {
...
mdbInput,
mdbTextarea
} from "mdbvue";
[...]
export default {
name: "App",
components: {
...
mdbInput,
mdbTextarea,
...
},
data() {
return {
events: [
...
],
modal: false,
newValues: []
};
},
<mdb-modal-body>
<form class="mx-3 grey-text">
<mdb-input
name="time"
label="Time"
icon="clock"
placeholder="12:30"
type="text"
@input="handleInput($event, 'time')"
/>
<mdb-input
name="title"
label="Title"
icon="edit"
placeholder="Briefing"
type="text"
@input="handleInput($event, 'title')"
/>
<mdb-input
name="location"
label="Location (optional)"
icon="map"
type="text"
@input="handleInput($event, 'location')"
/>
<mdb-textarea
name="description"
label="Description (optional)"
icon="sticky-note"
@input="handleInput($event, 'description')"
/>
</form>
</mdb-modal-body>
handleInput(val, type) {
this.newValues[type] = val;
console.log(this.newValues);
},
Let's check how handleInput() functions works. Let's print to console our state object every time this function is called. To do this, we add console.log(this.newValues); to the function body:
handleInput(val, type) {
this.newValues[type] = val;
console.log(this.newValues);
},

Every time we type something inside the input, it's value is added to the newValues variable so we can use it when our form is submitted.
Since we have all of our inputs handled, let's remove console.log() and move to the final steps - to submit the form and add the new item to the list.
addEvent() {
this.events.push({
time: this.newValues["time"],
title: this.newValues["title"],
location: this.newValues["location"],
description: this.newValues["description"]
});
}
<mdb-btn color="info" @click.native="addEvent">Add</mdb-btn>
Now every time we click on the Add button, we will trigger the addEvent() function which will add a new item to the events array using push().
Note:
We don't have to add an id to the new event ourselves. Our v-for loop will do that for us automatically.

Previous lesson Download Next lesson
Spread the word:
