Home » VueJS Tutorial

Methods in VueJS

Learn about the VueJS methods, how to declare the methods, how to define and use them?
Submitted by Venkatesan C, on March 21, 2022

Methods are not just something to VueJs and it's not a special concept in VueJs or in general for programming. However, there are things you should keep in mind when declaring methods for your components in VueJs applications.

Some important points to be remembered for declaring methods in VueJs components are:

• You should declare methods inside the methods property of the default export object.
• You should not use arrow functions inside the method property as it will lead to throwing errors.
• Apart from the above, there are subtle things to discuss the methods. Let's understand the methods through a sample project.

Create a Vue project using the Vite build tool. Let's name it second-app (in fact this is the same project that's been created in the VueJS installation tutorial).

Here's the project structure:

Now delete everything inside the App.vue file and paste the below code. The below is simpler to understand the methods in VueJs.

App.vue:

<template>
  <h1>First Name: {{fname}}</h1>
  <h1>Last Name: {{lname}}</h1>
  <h1>Full Name: {{displayFullName()}}</h1>
  <h4>{{add(5,6)}}</h4>
  <h4>{{add(8,6)}}</h4>
  <h4>Tax : {{taxCal(10000)}}</h4>
  <h4>Tax : {{taxCal(20000)}}</h4>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
     fname: "Bruce",
     lname: "Wayne",
     tax: 0.3
    };
  },
  methods: {
    displayFullName(){
      return this.fname + " " + this.lname
    },
    add(a,b){
      return a+b
    },
    taxCal(amount){
      return amount * this.tax
    }
  }
};
</script>

Methods are declared in the methods property of the export default object. As you can see, there are three methods that we have declared above. The methods are

• displayFullName()
• add(a,b)
• taxCal(amount)

These methods are just for the demonstration purposes, you can define methods of your choice as per the functionalities needed.

• In the displayFullName() method you can see that we access the data properties in the form of fname and this.lname. This shows that, if you want to use any data properties inside the method, you have to access via this keyword.
• In the add(a,b) method, we pass in parameters a and b. This method is to show you that you can call such a function as many times as you want with different parameters passed as arguments. In fact this is why functions are used as you all know, to use multiple times as required.
• The taxCal(amount) is to show you how a parameter and a data property can be used in a function. Here, we have a parameter amount and data property this.tax. Using both, the tax amount is calculated and displayed.

Note:

• this keyword is used only inside the methods to access the data properties, but not inside the template. Inside the template you access the data properties with just their keys inside mustache syntax.
• Inside methods, declare only regular functions, use of arrow function will break the application.

displayFullName: () => {
	return this.fname + " " + this.lname
},

Using the above arrow function will throw an error in the console.

---