Add new Event – handling inputs

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.

1. Import mdbInput and mdbTextarea to App.vue
• Vue (script)

import {
  ...
  mdbInput,
  mdbTextarea
} from "mdbvue";

[...]
export default {
  name: "App",
	  components: {
	    ...
	    mdbInput,
	    mdbTextarea,
	    ...
	  },
  

2. Add a new newValues: [] array to data()
• Vue (script)

  data() {
    return {
      events: [
		...
      ],
      modal: false,
      newValues: []
    };
  },
  

3. Replace the modal body with the following code
• Vue

  <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>
  

4. Add the handleInput function
• Vue

    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:

• Vue

    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.

5. Add the addEvent() function:
• Vue

    addEvent() {
      this.events.push({
        time: this.newValues["time"],
        title: this.newValues["title"],
        location: this.newValues["location"],
        description: this.newValues["description"]
      });
    }
  

6. Add @click.native="addEvent" to the Add button in modal footer:
• Vue

<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.