First, we'll go to the same site that we were on and get all of that code, copy that, and now navigate to SearchResults.vue. Now we don't have a ton of code in here so it's not going to be a problem to populate our finished result with what we have.

Let's paste that in and now let's take a look and see what needs to be swapped out. so we know we have to put the submit query inside of the input. So let me just take this and I'm going to take all of the event listener data there and go to the very end paste pasted in.

Now let's see what we have.

That is already looking much better and the search bar is functional, but the results aren't, so let's focus on that first. Now that we have this we see that we have our result post wrapper and then we have all of these hardcoded posts.

We're going to do the same thing we did in the previous page where we are just going to go and grab each one of these hard-coded items and then we're going to remove those and we're going to be left with a single post.

SearchResults.vue

        <div class="results-posts-wrapper">

            <div class="post">
                <div class="category-name">
                    JavaScript
                </div>

                <div class="result-post-title">
                    <a href="#">
                        Guide to rendering posts on a Google Map in Rails
                    </a>
                </div>
            </div>
        </div>
    </div>

We can save here just to make sure it didn't break anything, and there we go, we have our single post. Now we want to iterate over that. We know that we're going to need a v-for directive.

SearchResults.vue

        <div class="results-posts-wrapper">

            <div v-for="post in results" :key ="post.id" class="post">
                <div class="category-name">
                    JavaScript
                </div>

                <div class="result-post-title">
                    <a href="#">
                        Guide to rendering posts on a Google Map in Rails
                    </a>
                </div>
            </div>
        </div>
    </div>

Remember that you can name this whatever you want. My goal is to make sure that it's always nice and descriptive. Now if I hit save and come back you can see that it replicates every one of those titles so that actually means it's working.

It's creating a new div for every element that was returned. Now, we just have to call that value.

SearchResults.vue

        <div class="results-posts-wrapper">

            <div v-for="post in results" :key ="post.id" class="post">
                <div class="category-name">
                    JavaScript
                </div>

                <div class="result-post-title">
                    <a href="#">                 
                        {{ post.title }}
                    </a>
                </div>
            </div>
        </div>
    </div>

Let's see if this is working

Everything is working properly. We have our titles coming in and we can rerun our queries. Let's bring in our image.

SearchResults.vue

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

We have our logo now.

This page is looking really good. I think the next step is going to be to update our topics. There are a few ways we can do it. The last time we built this in the recent posts, we simply brought in a single category, but here I think we have enough room to bring in more.

I think we're fine to show all of them. Let's build this out.

SearchResults.vue

        <div class="results-posts-wrapper">

            <div v-for="post in results" :key ="post.id" class="post">
                <div class="category-name">
                    <span v-for="topic in post.associated_topics" :key="topic">{{ topic }}</span>
                </div>

                <div class="result-post-title">
                    <a href="#">                 
                        {{ post.title }}
                    </a>
                </div>
            </div>
        </div>
    </div>

This is kind of working now.

Notice what it's doing is it's putting them right next to each other. I am just going to go into App.vue because we already have this category-name style, and I don't think it makes sense to create a completely separate class.

We can just select the span from there. Let's go and do that.

App.vue

.category-name {
  color: #2660f3;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  font-weight: 600;
}

.category-name {
  margin-right: 15px;
}

I'm liking that. These links are not active yet, so let's do that.

SearchResults.vue

        <div class="results-posts-wrapper">

            <div v-for="post in results" :key ="post.id" class="post">
                <div class="category-name">
                    <span v-for="topic in post.associated_topics" :key="topic">{{ topic }}</span>
                </div>

                <div class="result-post-title">
                    <a :href="post.url_for_post" target="_blank">                 
                        {{ post.title }}
                    </a>
                </div>
            </div>
        </div>
    </div>

Now if I click on this 'Vim + Ctags Tutorial', this is actually working.

This is working really well, and I'm really happy with this implementation so far. We do still have a little work to do, even on the design side. In addition to organizing our code we also need to make each one of these resource links functional.

We're going to have to come up with something a little bit different, and we're just going to show the entire URL and that is going to be perfectly fine.

Let's take a break now and then we'll build that out in the next guide.

Resources

• Source Code
• Style Code