Search⌘ K
AI Features
Home
Courses
A Beginner’s Guide To Nuxt 3

Filtering by Tag

Explore how to implement tag-based filtering for images in a Nuxt 3 project. Learn to manage full and filtered image datasets separately, update reactive state on tag selection, and use CSS to highlight selected tags, improving the user interface without additional API calls.

We'll cover the following...

Why we set the images twice

When storing our images from the API, we have set the same data to two variables:

Javascript (babel-node)
function setImageData() {
    displayImages.value = [];
    // set both the imageData and displayImages variables:
    imageData.value = images?.value?.hits;
    displayImages.value = images?.value?.hits;
    
    numberOfPages.value = Math.ceil(images?.value?.total / imagesPerPage.value);
    createTags();
}

  • Lines 4–5: Both the imageData and the displayImages variables are set with the returned image data.

The reason for this is due to filtering. The imageData variable will always hold the full set of results from the previous search. The displayImages variable will hold a modified/filtered version of these results to display to the user. This means we always have the full set of results available to revert back to if the user ...