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.
Also Read: Event Listeners in Laravel
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/[email protected]></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.
