Here, we will learn on how to call a function in vue template.

First, we have to define the function in the methods. and then we can use an event listener to call the function from the Vue template.

In this example, we will increment a number using a function and call the function using a click event from the vue template.

Define and call a function in vue template.

First let’s create the data and the methods in vue.

In script:

<script>
export default {
      data(){
        return{
          number: 0
        }
      },
      methods:{
        increaseNumber(){
          this.number ++
        }
      }
}
</script>

Here i have created a function call increaseNumber(), which will increment the number with + 1 whenever we call the function with a click Event.

In template:

<template>
  <div>
    <button @click="increaseNumber()">Increase Number</button>
    The Number is : {{ number }}
  </div>
</template>

Now whenever we click the function from the template, it will call the function and it will increase the value of the number by + 1.

Related Topics:

Call a Vue.js Component Method From Outside The Component

Update Parent Data From Child Component In VueJs

Call a Vue Method on page load in Vue JS