Javascript is required
Mokkapps Logo

Vue Tip: Destructure in v-for

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Nov 16, 2021
1 min read
|
86 views
Template
Destructure in v-for Image

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 Vue 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.