I think the very first approach will be pretty much what we did inside of the home page. So let's take a look really quick at that because we may even be able to just reuse that code and yes it looks like it can I can just pull in this div and let's just paste it here. It's going to have to be a little bit different. We're going to have to make a few changes.

So we're going to have post here but I'm going to change the name to result because our data model here is results if you remember. And then also this is going to be the result.id and then right here this will be the result.title. This is going to be everything that we need here.

And now we can come an ad that results data attribute. So here we'll say results: and we can set this equal to an empty array. And now what we're going to do is we need to decide exactly where we want the process of adding to the results or rate to take place. We don't really need to put it in the before mount hook and the reason is because any time that we're going to be interacting with these results it's going to be inside of this getResults function.

Let's come down here and let's pretty much do the same type of process that we had before so I can say this.results.push(). And now inside of here say dot dot dot which is our spread operator and say response.data.posts hit save and now lets see if this is working.

It is, so you can see right here. We have each one of the posts and if we come back let's try this out again, type Ruby. And you can see we have each one of the posts for Ruby. It's also here on the console if you want to verify that this is giving us everything that we need. So this is working really well.

So now that we have that and it's only been a couple minutes let's keep on going down the line and see what else we're going to build out. So let's come up here. I think it's probably one of the most natural things next to put our own input so we we're going to create an input tag here. It's going to be text and this is going to use that same listener and modifier. So I'm going to say keyup and we want to say a keyup.enter.

And then from there let's see, we're going to need to run a query inside of here. So just create a function called submitQuery() and then that is all we're going to have to do in there and we don't have to put the brackets here. The params there because this is being passed in and called from a listener then this is automatically going to get access to the events.

So let's come down inside of our custom methods and create submitQuery pass in event as the argument and what we want to do is we want to take this query. So the same query that we set to null and then in the before mount we have the query from the params placed in here what we want to do now is we want to take it from the form element. So whereas before we got in from the route and from the programs. Now we want to be able to have the user type in to this input and grab those values.

So let's say that we want to set this.query equal to event.target.value and then that's all we need to do. And now we can say this.getResults and then pass in this.query. Okay so let's hit save here and let's see if this is working.

So right now we have each one of those elements let's clear this off and lets type view and that's working. Now I should say it's kind of working. Notice how this adds to the bottom. That's because we're not actually clearing out this array and that's fine. It's actually good for you to see that if I were to type redis in here this is now adding on all of the titles for redis. So this is kind of an interesting little bug here and it's not too hard to get rid of it.

All we need to do is make sure that we were clearing out the results so there are a few spots where we could do it but I think it makes the most sense to just put it right inside of getResults. Because any time that we call this function we want to start off with a clean set of results so we want that array to be empty so I can say this.results set this equal to the empty array. Save and now we're back.

So now if I say rails and run that now you can see it clears off it empties out array and then it fills in with the new items that it gets from the API. If I type vim it does the same thing. So this is working really nicely. I'm happy with the behavior here and now we've also seen how we can work with that data element we can add to it. We can clear it out and how we can have our own search feature.

Now let's also go back to the home page and make sure that we didn't break anything here. So now if I say rails you can see everything is still working. So great job. If you did that we now have created a secondary input that will go and will call the same API.

Resources

• Source Code