Destructuring v-for loops in Vue.js

October 15, 2020

• vue
• javascript
• loop
• for
• destructuring

Vue.js provides a useful directive for looping over lists called v-for.

It is simple to use too, we just need some data to loop over:

export default {
  data() {
    return {
      pizzas: [
        {
          id: 1,
          name: "Margherita",
          price: 7.95
        },
        {
          id: 2,
          name: "Pepperoni",
          price: 8.95

        },
        {
          id: 3,
          name: "Vegetarian",
          price: 8.95
        },
      ],
    }
  }
}

Now we can use the v-for directive to loop over our pizzas in the HTML template:

<ul>
  <li v-for="pizza in pizzas" :key="pizza.id">
    <span>{{ pizza.id }}</span> ~ 
    <span>{{ pizza.name }}</span> ~
    <span>{{ pizza.price }}</span>
  </li>
</ul>

And we would see this result in the browser:

1 ~ Margherita ~ 7.95

2 ~ Pepperoni ~ 8.95

3 ~ Vegetarian ~ 8.95

This all works fine, but we can also make use of array destructuring to unpack the values of each pizza, and place them into variables:

<ul>
  <li v-for="{ id, name, price } in pizzas" :key="id">
    <span>{{ id }}</span> ~ <span>{{ name }}</span> ~
    <span>{{ price }}</span>
  </li>
</ul>

This gives us 3 variables we can directly use: id, name and price. These can be accessed in our template, and also in our key attribute too, without needing to use the pizza object prefix (ie pizza.name).