Challenge 1 / 1

In this video, we start with a component that iterates through a list of items using the items' index in the Array as key, like so:

<shopping-cart-item
    v-for="(item, index) in items"
    :key="index"
    :item="item"
/>

But this is not ideal! In a real application, each item should have an id that is unique to that item for the key attribute. But why is this so?

The key becomes the internal id of the object, which is useful because it's included when Vue displays an error.

Because if we remove and add items from this list dynamically, the key for an existing item might change. That could cause Vue to destroy and re-create the entire component from scratch instead of reusing the existing instance.

Becauase Vue needs proper item ids to be assigned to its DOM nodes. In the case of v-for where each node comes from data, vue is asking for us to provide this internal id for them.

No reason, we really can put anything in the key attribute as long as it's not duplicated. Vue will work its magic under the hood so that items get rendered correctly

Rewatch the video