[Vuejs]-How to correct: “Do not use keys, do not use keys, for example, not using keys.”?

by

0👍

Key of component is important because it allows Vue to track which element exactly that is. When you use index, the same index might be assigned to a different component. Array can be resorted or element can be removed and while you know it won’t (weekdays won’t change), Vue has no such certainty. This is what this error message is trying to tell you.

In order to address it, you could add explicit index to each element. For instance weekdays could have the following format:

const weekdays = [
    { id: 1, name: 'Monday' },
    { id: 2, name: 'Tuesday' },
    // ...
    { id: 7, name: 'Sunday' },
];

Then you could use id property as a unique value for your key.

0👍

I found a solution to this problem, the following actions helped me.
Remove key from .d_day and .li_day elements. The .d_day elements added a shared div, set the currentPage as the key to the current div, and replaced the transition-group with the transition.

<template>
  <div class="all">
      <div class="pagination">
        <div @click="prevPage" class="btn-left"><</div> 
        <p>{{ nameOfOneMonth }} {{ year }}</p>
        <div @click="nextPage" class="btn-right">></div> 
      </div>

        <div class="d_nameOfDays">
          <li v-for="day in nameOfDays" class="nameOfDays">{{ day }}</li>
        </div>
        <transition name="fade" >
          <div :key="currentPage">
            <div v-for="(week, i) in getCalendar" class="d_day">
            <li v-for="day in week" class="li_day">
            <div class="day" 
               v-bind:class="{ 'grey': isAnotherMonth(i, day), 'currentDay': currentDayOnCalendar(day) }"
               >{{ day }}</div>
              </li>
            </div>
          </div>
        </transition>
  </div> 
</template>

Leave a comment