Mokkapps Logo

Vue Tip: Destructure in v-for

11/16/2021

cover

I’m a big fan of ES6 destructuring and recently discovered that you can use it in v-for.

First, let’s take a look at a v-for without using ES6 destructuring:

<div v-for="article in articles" :key="article.id">
  <h2>{{ article.title }}</h2>
</div>

articles is a list of article JavaScript objects and has the type Article[]:

interface Article {
  title: string;
  id: string;
}

We can use ES6 destructuring which results in a cleaner template code:

<div v-for="{id, title} in articles" :key="id">
  <h2>{{ title }}</h2>
</div>


If you liked this tip, follow me on Twitter to get notified about new tips, blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

Du hast einen Fehler in diesem Artikel gefunden? Du möchtest gerne etwas klarstellen, aktualisieren oder hinzufügen?

Alle meine Artikel können auf Github editiert werden. Jeder Fix ist willkommen, egal wie klein er sein mag!

Ändern auf Github
Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)

Michael Hoffmann

Senior Frontend Developer (Freelancer) aus München mit Fokus auf Vue.js