Add new Event – handling inputs

web
mobile

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.

  1. Import mdbInput and mdbTextarea to App.vue
  2. 
    import {
      ...
      mdbInput,
      mdbTextarea
    } from "mdbvue";
    
    [...]
    export default {
      name: "App",
    	  components: {
    	    ...
    	    mdbInput,
    	    mdbTextarea,
    	    ...
    	  },
      
  3. Add a new newValues: [] array to data()
  4. 
    
      data() {
        return {
          events: [
    		...
          ],
          modal: false,
          newValues: []
        };
      },
      
  5. Replace the modal body with the following code
  6. 
      <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>
      
  7. Add the handleInput function
  8. 
        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);
        },
      
    Handle input event

    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.

  9. Add the addEvent() function:
  10. 
        addEvent() {
          this.events.push({
            time: this.newValues["time"],
            title: this.newValues["title"],
            location: this.newValues["location"],
            description: this.newValues["description"]
          });
        }
      
  11. Add @click.native="addEvent" to the Add button in modal footer:
  12. 
    <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.

    Add Event demo

Rate this lesson

Previous lesson Download Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...