Vue Tip: Destructure in v-for

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:

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

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

1interface Article {
2  title: string
3  id: string
4}

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

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

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

Vue Tip: Avoid Empty Class Attributes

This Vue tip helps to avoid empty class attributes in the rendered HTML

Vue Tip: Avoid Unwanted Re-Renders of an Element Using v-once

The v-once directive is a Vue.js directive used to avoid unwanted re-renders of an element.