Ivan Sieder offers a nice tip on how to write better v-for loops in VueJS component templates.

There is really nothing wrong with the above code, but there is a small aspect, which really bugs me. As you can see, we are repeating the product identifier inside the output twice ({{ product.name }} and {{ product.price }}).

We are modern web developers (at least I hope so) and therefore we are going to use modern ES6 functionality. The feature we are going to use is called destructuring assignment. Basically, what the destructuring assignment allows us to do, is to pull a specific property off of an object and store it in a variable.

https://simedia.tech/blog/vue-js-destructuring-assignment-for-loops/