·
0 min read
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 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.