{{announcement.body}}
{{announcement.title}}

Vue Tutorial 3 - Handling User Input

DZone 's Guide to

Vue Tutorial 3 - Handling User Input

V-on to the rescue!

· Web Dev Zone ·
Free Resource

person-on-mountain-overlooking-lake

In the previous tutorial, we peeked behind the curtain to learn a few Vue.js directives.

We used v-if to check if a component should be visible or not. We deployed v-click to toggle a state of a variable. We adopted v-for to display a list of groceries our granny wanted us to get for her.  

However, the list is fixed, and this week, our granny wants us to also get her some sugar and flour for the cake she is baking. Therefore, we will look at handling user input with Vue.js, and by the end of this tutorial, we’ll be able to add more items to the list. 

You may also like: Vue.js Tutorial 1 — Hello Vue.

Handling User Input

The hardest part about this functionality is connecting the add button to a function that will handle adding contents of an input box to the list of groceries. This is achieved using the v-on directive. We’ve used the v-on directive before to toggle the state of a seen variable. We will use it today to call a function that we define in the Vue instance. 

 V-on attaches an event listener to the element. We pass the type of event that we’re interested in as an argument. In general, it can accept any type of native DOM event listed here (https://developer.mozilla.org/en-US/docs/Web/Events). Here are examples of the most commonly used events:

 v-on:click 

 v-on:keyup 

 v-on:submit 


First things first; let’s create our form consisting of an input box and a submit button above the list of groceries. 

<input ref="item"/>
<button v-on:click="handleSubmit">Add to the list</button>


Nothing will happen once the button is pressed because we haven’t defined the handleSubmit function yet. Please note the ref property on the input box which will later be used to get access to the value of this element i.e. user input. 

Now is the time to define the method handling the input. To start off, we will simply print out the input in the console and clear the input box.

var app = new Vue({
    el: "#app-3",
    data: {
        seen: true,
        groceries: [
            {name: "Milk"},
            {name: "Cheese"},
            {name: "Bread"},
            {name: "Butter"},
        ]
    },
    methods: {
        handleSubmit: function () {
            console.log(this.$refs.item.value)
            this.$refs.item.value = '';
        }
    }
});


If you’ve done everything correctly, your input will be printed in the console upon the button click. Then, it will be cleared in an instant. This is what it should look like.  

Almost there!

Almost there!

Obviously, if we type in sugar and flour in the input box, the items will not show up on the list. That’s our next step. In order to achieve this, we shall use the push method. 

 this.groceries.push({name: this.$refs.item.value}) 

We are finally able to add items to the list and ensure our granny's cake is a success. Go us! 

Success!

Success!

Conclusion

In today's bite-size tutorial, we’ve learned a few important concepts — the v-on directive and the arguments it is capable of accepting, binding methods to events, and adding items to a list. 

Stay tuned for the next tutorial where we’ll dive even deeper into the world of Vue.js. The code for this tutorial is available here


Further Reading

Topics:
web dev ,vue ,javascript ,frontend ,component ,directive ,hooks ,react ,angular ,tutorial

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}