IMG-LOGO

How to use methods in Vue.js?

andy - 05 Jul, 2018 8156 Views 0 Comment

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 used to perform or execute an operation or activity. So how to use a method in Vue.js? To create or use a method in Vue.js is pretty simple. In the Vue.js instance object, there is a methods section where you can declare the methods.

I will create three example methods. The first method will return a string. In the data section, I also have created a data object string which will be called name that will be passed into the first function. A thing to remember in here is when you try to access a data object variable, you have to use the keyword this, otherwise, you will get a javascript error. The second method will perform an alert message and will accept one parameter string which will be based on a user input.

Please see the following example code represents the two methods. We have declared two variable strings in the data section. If you see on the second variable which is myValue. This data will be used as a model input for user to enter the value.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
	<h5>{{ welcomeMessage() }}</h5>
	<p>Enter your a value below and click the following button to perform an alert message.</p>
	<input type="text" v-model="myValue"/> <button type="button" v-on:click="alertMe(myValue)">Alert Button</button>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			name: 'Guest',
			myValue: ''
		},
		methods: {
			welcomeMessage: function(){
				return "Hello " + this.name + ", how are you today?"
			},
			
			alertMe: function(value){
				if(value == null){
					alert("Hi there, you just click an alert button and did not enter any value.");
				}else{
					alert("Hi there, you just click an alert button and the value of the input is " + value);
				}
				
			}
		}
	})
</script>

Demo of the tutorial.

{{ welcomeMessage() }}

Enter your a value below and click the following button to perform an alert message.

When declaring a function in the methods section, you can also use the following short syntax like below that will omit the keyword function. This will also work.

new Vue({
	el: '#app',
	data: {
		name: 'Guest',
		myValue: ''
	},
	methods: {
		welcomeMessage(){
			return "Hello " + this.name + ", how are you today?"
		},
		
		alertMe(value){
			if(value == null){
				alert("Hi there, you just click an alert button and did not enter any value.");
			}else{
				alert("Hi there, you just click an alert button and the value of the input is " + value);
			}
			
		}
	}
})
A shortcut or alternative way to use v-on:click is @click. You can try replacing the v-on:click with @click.

I hope this simple tutorial helps. If you have any question or comment, feel free to post your question below.

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.

VueJS Button Click Event

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

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 ...