Looping With Objects

Adding posts

We can also use objects in Vue.js and place in our data section. For our example, we will create blog posts as objects and loop over them. For this, we can use the second Vue instance we created for the #blog section:

// script.js
Vue.createApp({
  data() {
    return {
      posts: [
        {
          id: 1,
          title: "Why I learned Vue",
          body:
            "I'm baby chambray street art thundercats occupy four loko church-key disrupt. Shaman neutra bushwick chicharrones",
        },
        {
          id: 2,
          title: "Using the Vue CDN",
          body:
            "I'm baby chambray street art thundercats occupy four loko church-key disrupt. Shaman neutra bushwick chicharrones",
        },
        {
          id: 3,
          title: "How I mastered Vue",
          body:
            "I'm baby chambray street art thundercats occupy four loko church-key disrupt. Shaman neutra bushwick chicharrones",
        },
      ],
    };
  },
}).mount("#blog");

Looping over objects

Even though these posts are objects, it’s still an array of objects, meaning we can again use the v-for directive in our HTML. Replace all of the HTML content between the <section id="blog"></section> with the following:

<!-- index.html -->
<section id="blog">
  <article v-for="post in posts">
    <h3>{{post.title}}</h3>
    <p>{{post.body}}</p>
    <p class="read_more">Read More</p>
  </article>
</section>

In our v-for loop, posts refers to the posts array containing three objects. And post will store the object value on each loop. The first loop will contain our first object, repeating until the end of the array is reached.

Data refactor

Back to out script, if we were to add more data properties to our Vue instance, things can quickly get crowded. To help, we can take this array of objects, and place it outside of our Vue instance.

And we can set up a new posts constant to store this at the top of the script:

const posts = [];

Vue.createApp({
    data() {
        return {
            name: "Homer Simpson",
            links: ["home", "portfolio", "contact me"],
        };
    },
}).mount("header");

Vue.createApp({

The three post object and now be moved into the posts array:

// 1. Cut three objects from data() and paste into posts array:
const posts = [
    {
        id: 1,
        title: "Why I learned Vue",
        body: "I'm baby chambray street art thundercats occupy four loko church-key disrupt. Shaman neutra bushwick chicharrones",
    },
    {
        id: 2,
        title: "Using the Vue CDN",
        body: "I'm baby chambray street art thundercats occupy four loko church-key disrupt. Shaman neutra bushwick chicharrones",
    },
    {
        id: 3,
        title: "How I mastered Vue",
        body: "I'm baby chambray street art thundercats occupy four loko church-key disrupt. Shaman neutra bushwick chicharrones",
    },
];

Vue.createApp({
    data() {
        return {
            name: "Homer Simpson",
            links: ["home", "portfolio", "contact me"],
        };
    },
}).mount("header");

Vue.createApp({
    data() {
        return {
      // 2. Reference the posts array:
            posts: posts,
        };
    },
}).mount("#blog");

And using the ES6 shorthand property syntax, since the name and value is both posts, we can shorten our code:

return {
  posts,
};

Everything should still work as before, but our code is now extracted into a variable.