Vue methods and computed properties

In 1.3.1 we identified that it could be tricky to fetch the image source and other image information from the images array. One solution is to use Vue methods, so let's go through how you can add methods to your Vue app. Later, we'll take a look at computed properties to see how to use them and how they're different from methods.

Learning Objectives

Vue methods

Vue exposes a number of objects for us to use. You've already used two of them in the form of props and the data objects and now we'll leverage the methods object.

In your code, add a methods object in the Product component (make sure it's in the Product component else you'll get errors!). Within the object, add a getImageSrc method as follows:

const Product = Vue.component('Product', {
  // other objects omitted

  methods: {
    getImageSrc(product) {
      return product.images[0].imageSrc;
    },
  },
});

Notice here that we're passing in the product and we're then using this object to access its own properties. This means we need a way to get the product into the method via our HTML. Replace the current image tag in your Product component's HTML with:

<img v-bind:src="getImageSrc(product)" />

Here we need to bind the image source to the function and pass in the product. This should be enough to get the source and to render the image.

Assignment - Coding challenge

We also store the image's title in our data object. Your challenge is to follow the same pattern as the getImageSrc method and add a getImageTitle method to return the title. You should end up with an image tag that looks something like this:

<img src="./path_to_image/image_name.jpg" title="Title of image here" />

Computed properties

Vue methods can take arguments and can be used when we want something to happen in our component. For example; changing the image/title as we did above as well as handling events such as click event. Computed properties on the other hand, don't take arguments and are used to compose data from data that already exists. To illustrate this, we'll return to our app component and we'll add a computed properties object.

The first step is to add the brand data item to our data object:

  brand: 'Plants Direct',
  // other fields omitted

Next, we can add the computed object and add in our method:

  computed: {
    footerCopyrightNotice() {
      return '2021 ' + this.brand;
    },
  },

Notice here that we're not passing any arguments and we're simply returning the brand name plus a year to create our copyright notice.

To render it in the footer, add:

{{ footerCopyrightNotice }}

Assignment - Coding challenge

Most companies will have their physical address in the footer and Plants Direct are no different! Add address, city and postcode to your data object in the app component then combine them in a computed property method and output them in your HTML.

JSON:

// app component / main.js

address: '21 Sussex Gardens',
city: 'London',
postcode: 'SW1 01L',

// other fields omitted

You should end up with a method that outputs something like:

Our address: 21 Sussex Gardens, London, SW1 01L

Additional resources