search

IBM / vue-a11y-calendar

Accessible, internationalized Vue calendar
https://ibm.github.io/vue-a11y-calendar/
Apache License 2.0
253 stars 21 forks source link

Duplicate key warning #31

Open maxleaver opened 6 years ago

maxleaver commented 6 years ago

The following error appears in console when using the calendar or running unit tests: '[Vue warn]: Duplicate keys detected: 'week--[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]'. This may cause an update error.

Vue requires a unique key when iterating. The key for each week row is being passed the week object rather than the week number or an index. Updating the key on line 12 of calendar.html resolves the issue. Happy to submit a PR for this.

morangil commented 5 years ago

hey @maxleaver , can you please let me know what did you change to fix this error?

maxleaver commented 5 years ago

I simply updated the key used in calendar.html to utilize the index from v-for instead of the week number. The v-for loop that is the problem is on line 12 of calendar.html.

Original: <tr class="calendar__week" v-for="week in calendar.days" @click="select" :key="'week--' + week">

Updated: <tr class="calendar__week" v-for="(week, index) in calendar.days" @click="select" :key="'week--' + index">