Adding key to iterated products

When you use a v-for directive, Vue will iterate through the array and create a new DOM element for each member.

Let's say you change the array, though, while the app is running. For example, you delete one of the element. Now, Vue will need to update the DOM to reflect this change.

For the purposes of efficiency, Vue will try to identify the item it needs to remove, and simply remove that one item rather than completely re-rendering the array.