IMG-LOGO

VueJS Button Click Event

andy - 21 Feb, 2021 3043 Views 0 Comment

We are going to create a really simple VueJS application to showcase a button click event handling in VueJS.

In the application, there will be two methods and one variable string message. The idea of this application is when a user clicks a button. A message will be displayed to indicate that the user has already clicked the button. Another button will have the purpose of clear the displayed message.

Please see the full HTML code below.


<!doctype html>
<html>
	<head>
		<title>bytutorial.com Demo - Event Handling Click Button</title>
	</head>
	<body>
		<div id="app">
			<p>Click the following button to show a message</p>
			<p><input type="button" value="Click Me" v-on:click="clickButton()"/> <input type="button" value="Clear Message" v-on:click="clearMessage()"/></p>
			<p>
				{{clickMessage}}
			</p>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				clickMessage: ''
			},
			methods: {
				clickButton: function(){
					this.clickMessage = "You have clicked the button.";
				},
				
				clearMessage: function(){
					this.clickMessage = "";
				}
			}
		});
	</script>
</html>

If you see the above code, we declare the function click methods inside the method's block. You can have multiple methods defined in the block. Just remember to separate each individual method with a comma symbol.

In the VueJS data section. We set the value of the 'clickMessage' to an empty string. In the 'clickButton' method, we set a fixed value into 'clickMessage' string which just indicates that this method has been called and we display the message to the user. The last method which is the 'clearMessage' will perform a clear on the 'clickMessage' variable string.

Demo

To see the live demo, you can click the following link.

See Vue Button Click Event in action.

Download

To download the demo file. Please click the following URL link.

Download file.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Blogs

Related Tutorials

How to set radio button checked in Vue.js?

If you have a group of radio buttons and want to bind and set a radio button to be checked. You can perform a condition against the checked property value of the radio button.

How to use methods in Vue.js?

In this tutorial we are going to learn on how to use methods in Vue js So what actually a method is in Vue js A method can be considered as an action It has a function procedure that is ...

What is a Vue.js?

Vue js is another popular javascript library for building interactive web interfaces The library is designed to focus on the view layer only It is very lightweight and pretty easy to use compare to another library competitors such as Angular ...

VueJS Template List Binding

In this tutorial we are going to learn how to populate the content using the VueJs template We will use a for loop method to read the array of a product list and bind it to the UL LI HTML ...