Methods

Methods in Vue.js

Methods are functions that are defined within your Vue component and are used to handle user interactions, manipulate data, or perform any other logic needed for your application. They are the core of making your Vue app dynamic and responsive.

Defining Methods

Methods are defined within the methods option of your Vue component. Each method is a function that can be called from your template or other methods.

Vue.component('my-component', {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    greet() {
      alert(this.message);
    },
    changeMessage(newMessage) {
      this.message = newMessage;
    }
  }
});

Calling Methods from Templates

You can call methods directly from your template using the v-on directive (or its shorthand @). The v-on directive listens for specific DOM events and executes the corresponding method when the event occurs.

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="greet">Greet</button>
    <button @click="changeMessage('Goodbye Vue!')">Change Message</button>
  </div>
</template>

In this example:

• @click="greet" calls the greet method when the first button is clicked.
• @click="changeMessage('Goodbye Vue!')" calls the changeMessage method with the argument 'Goodbye Vue!' when the second button is clicked.

this Keyword

Inside a method, this always refers to the Vue component instance. This allows you to access the component's data, other methods, and the component itself.

Method Arguments

You can pass arguments to methods when calling them from your template. These arguments are passed as parameters to the method function.

<button @click="add(5)">Add 5</button>

methods: {
  add(number) {
    this.count += number;
  }
}

Method Best Practices

• Keep methods focused: Each method should ideally have a single, well-defined purpose. This makes your code more readable and maintainable.
• Avoid mutating data directly: While you can directly modify data within a method, it's generally better to use Vue's reactivity system (e.g., this.message = 'new value') to ensure that changes are tracked and the view is updated accordingly.
• Use descriptive names: Choose method names that clearly indicate what the method does.
• Consider computed properties: If a method simply calculates a value based on existing data, a computed property might be a better choice than a method. Computed properties are cached and only re-evaluated when their dependencies change, which can improve performance.

Example: Counter Component

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
}
</script>

This example demonstrates a simple counter component with two methods, increment and decrement, that update the count data property when the corresponding buttons are clicked. This illustrates the fundamental way methods are used to interact with and modify data within a Vue component.