v-for keys best practice

v-for.md

If you just list the index number then the keys are not unique:

<template>
  <!-- keys will be 0, 1, 2... -->
  <div v-for="(row, rowIndex) in rows" :key="rowIndex">
    <!-- keys will be 0, 1, 2... -->
    <div v-for="(cell, cellIndex) in row.cells" :key="cellIndex">
    </div>
  </div>
</template>

Instead, if you follow this pattern, it is always safes:

<template>
  <!-- keys will be row0, row1, row2... -->
  <div v-for="(row, rowIndex) in rows" :key="'row' + rowIndex">
    <!-- keys will be row0cell0, row0cell1, row1cell0, row1cell1, row2cell0... -->
    <div v-for="(cell, cellIndex) in row.cells" :key="'row' + rowIndex + 'cell' + cellIndex">
    </div>
  </div>
</template>