List example with v-divider not working as expected

[chmike]

I'm starting with vuetify and wrote a very simple app displaying a list of items. The code is inspired from an example of the vuefifyjs.com site.

My component is the following:

<template>
  <v-list dense>
    <template v-for="(item, index) in items">
      <v-list-item :key="item.r">
        <v-list-item-content class="font-weight-bold">
          <v-list-item-title>{{ item.n }} {{ item.t }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-divider v-if="index < items.length - 1" :key="index"></v-divider>
    </template>
  </v-list>
</template>

<script>
export default {
  name: "itemList",
  data() {
    return {
      items: this.$store.state.currentItems
    };
  },
};
</script>

It works and display the list with the separator as in the example. The problem is that I get warning in the console for each item. The warning is the following. (sorry for the screen capture, the errors can't be copied).

I get a warning for each item.

When I comment out the v-divider the error disappear. I don't understand how it works. Why do I need a :keys in the divider ? Why isn't the :key put in the v-item next to the v-for ?

[chmike]

Answering to myself. I've got the solution from the answer to another question on stackoverflow. The v-divider line must be changed into the following. The warning then vanishes. I would be glad to have an explanation why.

      <v-divider :key="`divider-${index}`"></v-divider>

[chmike]

The explanation is the following. The key must be unique for every element in the for loop. In my code, item.r is an integer and index is also an integer. This is not good because it is not unique anymore. Even worse, it happened that the item.r value was identical to the index value.

With the given solution the key for the divider is a unique string which can't also be the same of any item.r value used as key for the list item.