Guide to Passing Params in an API Query in Vue with Axios
Now that you've seen how to go out use Axios to communicate with outside APIs, I think this is a good time to extend that knowledge and see how we can pass parameters to those APIs.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

This is pretty much as basic of an API call as you can get. We are simply hitting an endpoint and then we are taking in the response data and then we're rendering it on the screen.

But we also have the ability when we're communicating with outside APIs, and it's going to be something you'll most likely be doing the majority of the time, is to pass parameters to it.

Let's see how we can do that now. We are going to build out the search result functionality so that we can actually search for data inside of the API and then have it returned on our search result component.

Now I'm going to start off by importing the Axios library. Anytime that you want to use it you need to make sure that you're bringing it in.

SearchResults.vue

<script>
import axios from "axios";

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

Now we need to create a method's list in here. Now it's very important to think through this method because our last one was very basic since it is simply something that goes out and it gets the recent posts.

Now our search for a result, though, is going to be a little bit different. We not only need to get those search results on the beforeMount process, we also need to give the user the ability to run another query. Our method here has to be a little bit more flexible.

SearchResults.vue

<script>
import axios from "axios";

export default {
  name: "SearchResults",
  data() {
    return {
      query: null
    };
  },
  beforeMount() {
    this.query = this.$route.params.query;
    console.log("In the before mount");
    console.log(this.query);
  },
  methods: {
    getResults(q) {
      axios
        .get("https://api.dailysmarty.com/posts")
        .then(response => {
          this.recentPosts.push(...response.data.posts.slice(0, 3));
          console.log(response.data.posts);
        })
        .catch(error => {
          console.log(error);
        })
    }
  }
};
</script>

It looks like everything got pulled in properly, so let's go take a look at the API endpoint. I'm going to go back to the documentation here and if you scroll down you can see the ability to query posts. So you click on that. So search for posts and here you can see that the endpoint is very similar to the other one that we brought in.

large

Now if you don't have a lot of experience working with outside APIs is what this means is if you see an endpoint that has a question mark everything after that is going to be some type of parameter. Let's just copy this whole thing here and switch back.

What this means is we're going to replace all of this with the code we just used.

SearchResults.vue

<script>
import axios from "axios";

export default {
  name: "SearchResults",
  data() {
    return {
      query: null
    };
  },
  beforeMount() {
    this.query = this.$route.params.query;
    console.log("In the before mount");
    console.log(this.query);
  },
  methods: {
    getResults(q) {
      axios
        .get("https://api.dailysmarty.com/search?q=rails")
        .then(response => {
          this.recentPosts.push(...response.data.posts.slice(0, 3));
          console.log(response.data.posts);
        })
        .catch(error => {
          console.log(error);
        })
    }
  }
};
</script>

Now I'm not even going to get into trying to run the query or anything like that, let's just console log this to make sure that this is working.

SearchResults.vue

<script>
import axios from "axios";

export default {
  name: "SearchResults",
  data() {
    return {
      query: null
    };
  },
  beforeMount() {
    this.query = this.$route.params.query;
    getResults(this.query);
  },
  methods: {
    getResults(q) {
      axios
        .get("https://api.dailysmarty.com/search?q=rails")
        .then(response => {
          this.recentPosts.push(...response.data.posts.slice(0, 3));
          console.log(response.data.posts);
        })
        .catch(error => {
          console.log(error);
        })
    }
  }
};
</script>

Now if this works we should get the search data for the keyword of rails. Let's switch back here and so we can run a query and let's see if this is working.

large

Okay, so it had a few errors let's see exactly what those errors are. It says "getResults is not defined" and that's my mistake and you may have seen this when you were doing this yourself.

SearchResults.vue

<script>
import axios from "axios";

export default {
  name: "SearchResults",
  data() {
    return {
      query: null
    };
  },
  beforeMount() {
    this.query = this.$route.params.query;
    this.getResults(this.query);
  },
  methods: {
    getResults(q) {
      axios
        .get("https://api.dailysmarty.com/search?q=rails")
        .then(response => {
          this.recentPosts.push(...response.data.posts.slice(0, 3));
          console.log(response.data.posts);
        })
        .catch(error => {
          console.log(error);
        })
    }
  }
};
</script>

After fixing that, you can see that it did work.

large

So right now you can see if I pull this to the side these are each items that would be returned if you typed rails and you can even see the word rails in a few of these, and that means that that's working. But it's not that helpful because this is hardcoded in.

Now let's actually make this really work.

SearchResults.vue

<script>
import axios from "axios";

export default {
  name: "SearchResults",
  data() {
    return {
      query: null
    };
  },
  beforeMount() {
    this.query = this.$route.params.query;
    this.getResults(this.query);
  },
  methods: {
    getResults(q) {
      axios
        .get("https://api.dailysmarty.com/search?", { params: { q: q }})
        .then(response => {
          this.recentPosts.push(...response.data.posts.slice(0, 3));
          console.log(response.data.posts);
        })
        .catch(error => {
          console.log(error);
        })
    }
  }
};
</script>

Let's just test it out to make sure this is working. I'll search for Vue.

large

As you can see, we have our search results and now if you want to look at it you can see these search results are live. They're actually from Daily Smarty and they are for Vue, which means that our search engine is working really nicely.

Let's go back and one thing I want to show you here and it's the reason why I picked the name 'q' for the argument.

In JavaScript (this is not something specific to Vue) anytime that you have a key-value object where the name of the key is the same as the variable you're passing to it, there is a shorthand syntax for this where you can just pass in that name by itself.

SearchResults.vue

<script>
import axios from "axios";

export default {
  name: "SearchResults",
  data() {
    return {
      query: null
    };
  },
  beforeMount() {
    this.query = this.$route.params.query;
    this.getResults(this.query);
  },
  methods: {
    getResults(q) {
      axios
        .get("https://api.dailysmarty.com/search?", { params: { q } })
        .then(response => {
          this.recentPosts.push(...response.data.posts.slice(0, 3));
          console.log(response.data.posts);
        })
        .catch(error => {
          console.log(error);
        })
    }
  }
};
</script>

The reason for this is because for so many years developers have followed this kind of programming paradigm where they will have some kind of function argument like we have up here, and they'll name the variable the same thing as the key they're going to pass it to because usually, that's something that's pretty descriptive.

And What javascript did in one of its latest versions is say we see this happening so often we are simply going to make it possible for you to get rid of the colon and that whole key values syntax just pass in that one element as long as they're matching.

That is the reason why I picked out 'q' for the argument name that's going to work. Now let's switch back and let's just come back one more time to test this out and this time let's type in Unix and run that.

large

And you can see we get seven search results for Unix. This is working really well.

Obviously, we don't have a thing on the page but if you notice I'm following the same exact process that I did on the homepage where I first just concern ourselves with being able to communicate with the outside API and then make sure that the data that we're getting back is working properly.

In the next guide, we're going to be able to take this data and then place it directly on the page.

Resources