And because some of the urls are pretty long, instead of them being placed right here, right next to each other I think it makes more sense to have them go across and then just sit on top of each other.

So we're going to update a few of the styles and then bring these in.

Now, in order to do that, let's actually see the data that we're working with. So let's use a pre tag and then inside of the pre tag we'll see exactly what we have access to, and so this is a post

<pre>
{{post}}
</pre>

OK, so this is called a post link and it's pretty small and hard to see.

So we have a post link in kind of like the associated post, post links are stored in an array. So we are going to have to iterate over those, so that's not a problem at all. You probably already know how you want to do that. So let's come here, so in result-post-links-wrapper what I want to do is get rid of the three hard coded ones.

And now let's add in our v-for directives so say v-for = and say postLink in and then we can grab that, let's see this is going to be post. and then post_links just like this if I can type this morning.

So postLink in post.post_links and we're going to have to have a key directive and then this is just going to be the link because those are all going to be unique so we should be fine with having that and we'll add the actual href later.

So let's just make sure this is working and it is not. Oh and it's because it would probably help if I added a value. Let's see, OK, so it is technically working we're just not rendering it out. So let's come here and let's get rid of the lorem ipsum text. And so now we just want to put postLink in the double curly braces and there we go.

SearchResults.vue

<a v-for="postLink in post.post_links" :key="postLink" href="" class="result-post-link">{{ postLink }}</a>

So we have the value but we still need to parse it. So right now you can see we have this post link but we want the link url inside of it but this shows that we do have access to all of the data.

Let's make another request really quick just to test this out, I know in the redis query that you can see that yes there are in the redis search we have certain posts that have a ton of different links. And this is the reason why I didn't want to have them all going across and stacked on each other with columns, because you can see what could happen if you had something like 10 resource links.

So let's come over here and we're going to just first finish this so let's get this so it's actually calling the link url.

SearchResults.vue

<a v-for="postLink in post.post_links" :key="postLink" href="" class="result-post-link">{{ postLink.link_url }}</a>

Hit save, and now you can see thats showing the real url.

Now let's add this to the href, and so we're going to use binding for that and now we're going to use the same thing that we put in the values. So postLink.link_url and then let's also add a target here, so target="_blank".

SearchResults.vue

<a v-for="postLink in post.post_links" :key="postLink" :href="postLink.link_url" target="_blank" class="result-post-link">{{ postLink.link_url }}</a>

And now we should be good.

Okay so now I can come here to one of these resource links, click it and then I'm taken to that additional link. And just in case you're curious what this represents, if you click on the actual link itself what dailySmarty allows you to do is to store extra resource links. So these links here on the bottom that will either reference something up top or it's just something that the author wanted to provide for additional information, the API has access to those so that's all we're showing.

In a real life application you may not actually want to show that in a search result the only reason why I'm wanting to do it is because it shows you how you can nest in loop through nested data like we have there.

Okay now that we have that, let's see the best way of updating those styles so that we don't have a column approach but they're just stacked on top of each other. We have this result-post-links-wrapper if we go into the App.vue and so you can see oh it's right here .result-post-links-wrapper.

Now the reason why we are doing this is because it has grid-row: 3;and then grid-column: 1/-1;, so that is what we're currently using. Let's also look up top to see if it has a parent wrapper and let's inspect the element, I just want to see the DOM tree to see what's here. Because this is a little bit different than what I was planning on doing, so we're doing this a little bit on the fly which is good because this is a way that we do it in a real life app.

So we have this result-post-links wrapper.

And that is the parent element, and if you hover over it you can see here on the left hand side those 4 so you can see how they're all getting just stacked right next to each other.

So let's kind of just play with this a little bit. So and we can do it here in the console. So now if we say result-post-links-wrapper, and that's it this was confusing me a little bit, I was actually looking at the wrong class.

OK so we have results-post-wrapper but then we also have results-post-links-wrapper I was gonna say this doesn't look like a grid container. There we go, this one makes a little bit more sense. OK, so notice how here we have repeat auto-fit MinMax 100 px and then one fractional unit.

In order to get this they just take up an entire column, just change it to one fractional unit like this, still with repeat.

App.vue

.result-post-links-wrapper {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, 1fr);
    grid-gap: 2rem;
}

Hit save and now if you come back you can see they're all stacked on top of each other.

And that's what we're wanting. Like I said you probably would not be doing this in a real life app unless of course you needed to show it. And that's a reason why I wanted to show you how to do that because depending on your own use cases and the application you're going to be building out you may need to parse data and grab it and then show it on the screen.

So let's just test all this out. Oh and I just realized I forgot one thing, I want to add a link here on our logo up top for an easy way to get to the home page. So let's go back to the SearchResults.vue here and what we can do is we can wrap the logo inside of its own link.

And you may be tempted to do something like this where you come here and do and a tag. And the typical way of doing this would be something like a href and then just say I want you to go to the slash or something like that.

SearchResults.vue

<div class="results-logo">
    <a href="/">
    <img src="@/assests/ds_circle_logo.png" alt="">
    </a>
</div>

But this isn't going to work and I'll show you why here in a second. So if I hit save and open this up, now if I click this logo you can see it kind of works. But did you notice how that page actually refreshed? So let's let's try that again just in case you didn't notice. So if I click here on the logo you can see the page itself actually refreshes.

So you're kind of like starting the entire session over from scratch, it kind of kills the whole point of why you would use a single page application like vue or like react or anything like that, so it's really considered a poor practice to do that.

So instead what we're going to do is we're actually going to use a router link. So let's get rid of our a tag here, and so we're going to tie in to the router link and then from there we can say :to and so we're adding binding here, and then inside of double quotation marks. Now I'm going to pass in curly braces, only one, because we're not doing the normal kind of view data binding.

So I'm just go do a single curly brace and so I'm gonna say name single quotes home page and then at the very end close off our router link and then close off the router link tag.

SearchResults.vue

<div class="results-logo">
    <router-link :to="{ name: 'Homepage' }">
    <img src="@/assests/ds_circle_logo.png" alt="">
    </router-link>
</div>

So what's different here is we're actually tying in with the vue router as opposed to using just a regular a tag with HTML. So what this is going to do is it's going to still be inside of that same session, it's not going to refresh the page, it's just going to be exactly like a traditional kind of routing system for a single page application.

So now with all of that in place and notice here how I'm using the name once again. So this is my favorite way of implementing routing by using the name because I think that it is a really clear way of showing exactly where this link is pointing to, it pointing to the home page. And if we ever change the home page route to be something else than it we don't have to actually make any changes here.

So let's switch back now type in another search. Now pay attention, right up here on our tab and you'll see if I click it doesn't refresh the page now. And now it's actually working and it's a lot cleaner implementation.

So great job if you went through that, we know if we look at it, we now pretty much have a finished solution here on the search results page. So I think that in the next guide it would be a good time to start bringing and organizing all of our code so that our style code goes into the right set of files.

Resources

• Source Code