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:

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