Now, we know that we are going to have a search bar on the home page and inside of that input, if the user presses enter after they've typed their query then that should be what triggers the action to run the query.

I think the best spot for us to start would be to create that input box. In our Homepage.vue I'm going to create just a standard HTML input here but then I'm going to update this with a few other things, specifically we need to add an event listener.

Homepage.vue

<template>
  <div>
    <h1>Homepage</h1>

    <input type="text" @keyup.enter="submitQuery">
  </div>
</template>

<script>
export default {
  name: "Homepage",
  data() {
    return {};
  }
};
</script>

<style scoped>
</style>

This means is that there is going to be an event listener that is tied to any time the user is inside of the search box. When they type enter, then whatever method that we have inside of here is going to be called, so I think it would make sense to call this method submitQuery.

Homepage.vue

<template>
  <div>
    <h1>Homepage</h1>

    <input type="text" @keyup.enter="submitQuery">
  </div>
</template>

<script>
export default {
  name: "Homepage",
  data() {
    return {};
  },
  methods: {
      submitQuery(evt) {
          console.log(evt.target.value);
      }
  }
};
</script>

<style scoped>
</style>

Let's just try to test this out to make sure it's working. Open up your browser, and the javascript console. If everything's working then whatever text we type in our input box should come right to our console. If I type "vue js" and press enter you can see that right here in our console.

Now that we have that in place that means that we can actually run the query or at least we can pass this data. So the way that I'm going to structure this, and keep in mind there are a number of ways that you could build this out.

Technically you could build this out on a single page and then just have the query run hide one component and then show the search results component, but I think that it makes a little bit more sense, in this case, to separate this out.

If I were tasked with building a basic search engine like this in Vue I'd most likely create two components and have them on separate pages, and then I would pass params from the home page to the other page, which is what I am going to do here.

Let's switch back to our code. Now that we know that we have access to this data there are a number of ways that we can push data to a different route.

I'm going to get this console log out of the way and now I'll start building this out.

Homepage.vue

<script>
export default {
  name: "Homepage",
  data() {
    return {};
  },
  methods: {
      submitQuery(evt) {
          this.$router.push({ name: 'SearchResults' })
      }
  }
};
</script>

The this.$router.push with the dollar sign on the router means that this is a universal variable inside of Vue so we're going to have access to the router. My goal is to push to the search results route. If you come here to the router you see we have this name.

This is one of the things I really like about Vue routes.

We don't have to hard code in the path, because if you come and change the path in one spot then you need to go and change it everywhere else but the name is going to be something that is much more straightforward to call and most likely is not going to be changed.

I'm going to say I want to push name and then I want to also push params.

Homepage.vue

<script>
export default {
  name: "Homepage",
  data() {
    return {};
  },
  methods: {
      submitQuery(evt) {
          this.$router.push({ 
            name: 'SearchResults', 
            params: { query: evt.target.value } 
          });
      }
  }
};
</script>

What this means, if you've never seen this kind of syntax before is we are working with the router inside of Vue, we're going to push a new route. Now technically this can be called anything so don't let the name query confuse you.

If you wanted to call this 'asdf', You could do it, but I wouldn't recommend it since that's not too descriptive. but that is the way that we can pass the data in via a route. So this is something that is quite helpful.

There are a number of ways you can pass a data inside of Vue.

We also could use props that would be another way of doing it, but if you ever have a situation where you're on one page and you're redirecting the users to a completely different page like you're doing right here then being able to use params is a really helpful tool.

Now that we're pushing this data and this program and we're moving the user to this other route now we can actually have access to that data. But before we go and before we start updating some values inside the search results we'll just make sure that this works.

And it works. I'm typing Ruby into the search bar, and you can see that it redirects me to the search results page. Since i don't have any errors, that means that it's working.

Let's see how we can actually parse this data and how we can have access to it. open up our SearchResults.vue, then inside of our export default, we have data and then we have all the ability to put all kinds of methods.

I'm going to use here what is called a lifecycle method.

Now we're going to talk more about them later on not only in this section but also in future courses because they're very important, but one thing that you can do is access different stages of a component's lifecycle.

So if I want to I can access beforeMount here and this is just a regular function and it's also important to note how I did not list this inside of a methods object. The reason for that is because beforeMount is something that sits outside of your custom methods.

This is available directly to the component. What we can do now is create our first data element here.

SearchResults.vue

<script>
export default {
  name: "SearchResults",
  data() {
    return {
        query: null
    };
  },
  beforeMount(){
      this.query = this.$route.query;
      console.log(this.query);
  }
};
</script>

Let's see if it's working.

We said Javascript for our search query, and you can see that it works. It sent us to the SearchResults page, and we have javascript printed in the console.

What that means is now that we know how to access this data we can actually start pushing that to the API, run the query, and then get the data back. That means we're getting very close to actually being able to communicate with that outside service.

Now one other thing that I'm going to include for you here is a link to the Vue.js lifecycle methods. And so this is incredibly helpful. So if you just come right here and you come down to the lifecycle diagram and all include a link directly to here what this allows you to see are all of those lifecycle methods.

large

What these methods allow you to do is to be able to stack any kind of processes that you want inside of one of these states.

What we're going to say is that you do not want to actually render the element on the page so you don't want to show the component and it's template until this process has occurred.

We're calling our API, and maybe we do not want to actually show anything on the page until the API has been called. We can place that process inside of before mount so that we don't run into any issues.

That'de be a really bad user experience but because of these lifecycle hooks, we're able to take our methods and custom methods that we want. We can slide those directly in at one of these stages and that allows us to have a lot of granular control on when a certain process is going to be run inside of a component.

So great job if you went through that and don't worry if this is a little bit confusing this entire process is that it's perfectly fine. Lifecycle hooks are one of the more confusing things in most of the modern javascript frameworks.

They take a few times of going through them until they really start to make sense so don't worry we're going to be actually working with one throughout the rest of this project and in future projects hopefully by the end of that this whole process is going to make a little bit more sense.

Resources

• Source Code
• Vue Lifecycle Methods