One thing that I love about Vue, and really all of the JavaScript frameworks, is how you can communicate with APIs. The APIs that are produced in JSON, which is the majority of them that you'll most likely be working with, are javascript object notation and what that means is you're able to treat these data components as objects.

If that is still a little bit fuzzy on what that actually means and the benefits of it, don't worry, but what it means is that you're going to be able to parse through this data and use dot syntax, and you're going to be able to treat things like this ID or like this title just as if they were written in and hardcoded into the project itself.

Let's get going on doing that. We know that our recent post attribute contains all of those elements so let's get rid of these pre tags and instead let's actually just render this onto the screen.

Homepage.vue

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

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

    <div v-for="post in recentPosts">
    </div>
  </div>
</template>

You may notice this little red error line underneath your code and wonder why it's there. We're going to hover over it and you see it says "Elements in iteration expect to have 'v-bind:key' directives".

If you don't know what a key is what it means is that whenever you're working with this kind of iteration, what you're supposed to do is have a key that is connected to each element and it's supposed to be unique to each element.

Thankfully, as you may have noticed in that API we have a unique ID, so I can use it as a directive.

Homepage.vue

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

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

    <div v-for="post in recentPosts" :key="post.id">
    </div>
  </div>
</template>

Now, this goes to what I referenced earlier on how cool it was that you can treat each one of these recent posts just like a regular javascript object, so I can access the post in recent posts. The very first time goes through it's going to be the very latest post for the day on the Daily Smarty website.

Next time it's going to be the second most recent and it's going to be stored. Each one of them is going to be stored in post, in this variable, and then because Vue realizes we're working with JSON data, We're going to be able to treat it just like any javascript object.

Now what we want to do is say inside a double curly braces post.title, hit save and now if we look at our app, you can see we have all of the post titles.

Now, this is giving us all of the 10 most recent posts. If we wanted to only pull in the last three. Then there are a few ways of doing it.

Homepage.vue

<script>
 getRecentPosts() {
      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>

And there you go. Those are the last three elements. If you remember back to when we built out this front-end implementation, then you may remember that what we're expected to see is 3 posts, so this is all that we need.

Later on, we're also going to see how we can put these into links so that you can actually click on these and you'll be taken to the Daily Smarty page where it's at, but for right now we're just going to keep it like this.

Now we're able to iterate over an array, and then render our cleaned up data just like this on the browser's page.

Resources

Source Code