Skip to content
This repository has been archived by the owner on Jul 18, 2024. It is now read-only.

Duplicate key warning #31

Open
maxleaver opened this issue Jul 10, 2018 · 2 comments · May be fixed by #32
Open

Duplicate key warning #31

maxleaver opened this issue Jul 10, 2018 · 2 comments · May be fixed by #32

Comments

@maxleaver
Copy link

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
Copy link

morangil commented Nov 5, 2018

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

@maxleaver
Copy link
Author

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">

@backflip backflip linked a pull request Nov 26, 2019 that will close this issue
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix test errors and warnings backflip/vue-a11y-calendar
2 participants
@maxleaver @morangil