Use the computed Property to Filter Notes by Tag

Instructor: [0:00] For the last feature of our digital garden, I thought it'd be great to show you how I might filter posts by tag. To do this, let's start by creating a p tag inside of our HTML, and say filtered by. We're going to create a property in a little bit called selected tag. We'll toggle off the visibility using a v-show, and based on whether or not selected tag contains anything or not.

[0:20] Inside of our script block, let's go ahead and now define our data function, which will return an object. Inside of it, we'll have our selected tag, which will start out as an empty string. To verify this works, all we need to do is attach a click handler to our List element. When the List element is clicked, it would then assign selected tag with the appropriate tag.

[0:41] Now that we've saved, we'll see that when we click and look at the top, you'll see that we can see Filtered by Vue. If we click on other ones, like Nuxt Content frontend, it works.

[0:52] Now that we have this, though, we need to actually be able to filter out the notes. How are we going to do that? Computer properties to the rescue. Let's go ahead and create one called Displayed Notes and then we'll start by checking for a selected tag. If a selected tag exists, we'll go ahead and utilize the array function filter on our disc.notes.

[1:11] Then we'll basically run the check that if the note.tags includes the selected tag, that we'll go ahead and return the filtered array. Otherwise, we'll just return the notes as normal. Then to make sure we see the changes, let's swap out notes for Displayed Notes.

[1:27] Then when we click on the tags, we'll see that it works. There's our view. We see component notes frontend works as expected. Before we wrap up though, let's go and add a button in order to clear the filter so we can see all our notes again.

[1:40] We'll do that by just adding a button and we'll give you the text of clear and we'll assign it a click handler where selected tag will be assigned an empty string in order to remove all of that. Now as you can see, when we click, it works exactly as we want.

[1:53] To review, in this lesson, what we've done is we've leveraged now the power of fetching data from the backend using Nuxt Content and then combining it with functionality from Vue by using things like computer properties as well as click events in order to assign actual selected tags that are filtered by. Then actually filter the content accordingly on the client side.