Adding Event Listeners in Vue made easy

July 2, 2017 By - Usama Muneer | 1241

    Introduction

    In this article, we’ll go through the process of adding up the Event Listener on a simple button and compare the methods form both Vanilla JavaScript & Vue JS.

    You must have a basic understanding of HTML, JavaScript & a bit of Vue JS. But if you don’t know any of those, we’ll try and cover up some of it in the explanation.

    Follow through the steps and fall in love with the reactivity of Vue JS.

    Setting up the Boilerplate

    Create a new HTML file and name it Index.html

    <!DOCTYPE html>
    <html>
    <head>
       <title>Adding Event Listeners in Vue made easy</title>
    </head>
    <body>
    <div id="container">
    <ul>
       <li v-for="item in items">{{ item }}</li>
    </ul>
        <input id="input" type="text">
       <button id="button">Add new Item</button>
    </div>
    
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4"></script>
    <script type="text/javascript">
     var app = new Vue({
     el:'#container',
     data: {
     items: ['foo','bar']
     }
    });
    </script>
    </body>
    </html>
    
    

    Here we’ve setup a basic HTML file for our use. Included the Vue JS from CDN and Initialised the new Vue instance for our use.

    The Vanilla JavaScript Method

    Now we’ll try brushing up some Vanilla JavaScript skills and try to memorise those lengthy method names.

    Inside of the Vue container, create a new special method called mounted() and place the JavaScript code inside of it.

          mounted(){
             document.querySelector('#button').addEventListener('click',function() {
                var name = document.querySelector('#input');
    
             app.names.push(name.value);
    
             name.value = '';
    
             });
          }
    

    The Vue Method

    For the Vue Method, we’ll make use of the Vue directives inside of our markup.

    Changes in the HTML File

    <input id="input" type="text" v-model="newItem">
    <button v-on:click="addItem">Add new Item</button>

    If you noticed the change here, we’ve added a new Vue model directive in our Input and a new Vue on-click directive to our Button & assigned the method name to it. This is how we register the Event Listeners in Vue JS.

    Changes in Script

    Initialize an empty string and assigned to the newItem model inside of data.

            data: {
                newItem: '',
            },
    

    In Vue JS, there’s a special helper function called methods() for adding up the new methods.
    Place the following code inside of the Vue Container.

            methods: {
                addItem() {
                    this.names.push(this.newItem);
                    this.newItem = '';
                }
            }
    

    The addItem method is assigned to the Button we’re focussing on and it’s simply pushing the new values from the Input field to the names array.

    Conclusion

    In the Vanilla JavaScript method, you must have noticed that you have to dive into the DOM and then fetch the values. Where in Vue, the story is a lot different, data-centric and more simpler.

    To learn more about Vue JS, you can visit their official website.

    If you’ve any questions, leave us the comment below. You can also follow us on Twitter.

    blog user
    Usama Muneer

    A web enthusiastic, self-motivated & detail-oriented professional Full-Stack Web Developer from Karachi, Pakistan with experience in developing applications using JavaScript, WordPress & Laravel specifically. Loves to write on different web technologies with an equally useful skill to make some sense out of it.

    Related Posts

    Well, that was it, now we can simply jump to validating our form data with jQuery validate plugin & see how its done in no time.

    Vue.js has taken the front-end development world by storm over the last three years. The project, however, has been around much longer than that. It started in 2013 as a one-man project by Evan You.

    You must be familiar with axios calls for API consumption, but what about getting the files in response and render those files to the user for download. We got your covered, the below snippet is tested and works well.

    Laravel Mix is a simple API built around Webpack to facilitate compiling of assets using several CSS and JS pre-processors.