Jump Start with Vue 3/

...

/

Methods and Computed Properties

Methods and Computed Properties

Learn about methods and computed properties in Vue.

We'll cover the following...

Methods

Defining methods helps keep our UI logic together and out of our template. This helps keep the templates clean and readable and makes our logic easier to test.

Syntax

The basic syntax for defining methods in Vue components is as follows:

Press + to interact
export default {
  // Other component options...
  methods: {
    methodName() {
      // Method logic goes here
    },
    // Other methods...
  },
};

  • methods: This is an option in the Vue component object that’s used to define the methods for that component.

  • methodName: We can replace this with the name we want to give to our method. It should be a valid JavaScript identifier (e.g., handleClick, fetchData, etc.).

  • methods: We can define multiple methods within the methods object, separating them with commas.

We can define custom methods on our Vue instance by adding them to an object under the methods property.

...