Javascript is required
Mokkapps LogoMichael Hoffmann

Vue Tip: Destructure in v-for

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Nov 16, 2021
1 min read
|
117 views
Template
Vue Tip: 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. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.