Published on: 05 July, 2018

How to use methods in Vue.js?

Tumblr Digg Google Plus

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.