CODEWITHSUNDEEP
vue.js
Sour_sr
Sour_sr

Reputation: 223

[Vue warn]: Duplicate keys detected:

[Vue warn]: Duplicate keys detected: '65535'. This may cause an update error.

found in

---> <Board> at src/components/Board.vue
       <App> at src/App.vue
         <Root>

this code

<div class="listWrapper" v-for="list in board.lists" :key="list.pos" :data-list-id="list.id">
                            <List :data="list"></List>
                        </div>

and

const targetCard = {
                id: el.dataset.cardId * 1,
                listId: wrapper.dataset.listId * 1,
                pos : 65535
            }

I got this error. There seems to be an error in this code. How to solve it?

Upvotes: 1

Views: 4604

Answers (3)

赵小龙
赵小龙

Reputation: 27

your :key="list.pos" is pos:65535 so you have error

use different key will be ok

the key will make your dom update with data is update, so should make the :key unmatched.

Upvotes: 2

Excalibaard
Excalibaard

Reputation: 2073

list.pos isn't unique for each item you're looping through. In order for Vue to keep track of your items when board.lists changes internally, each item needs to have a unique identifier. This is very important if you're going to be adding/moving/removing items in the array.

  • If the items in board.lists come from a database, you could use :key="list.id" (or whichever key the database uses to distinguish the different items). This removes the error, and causes the least rerenders when board.lists updates.
  • If your item doesn't have an id (or another key that is guaranteed to be unique), you could use the index method provided by the other answers. v-for="(list, listidx) in board.lists" :key="'list-' + listidx".

The index method can cause items to rerender unnecessarily. When the first item is removed from the array for example, the index (and thus the key) changes for every item after that, causing the entire list to be rerendered. Depending on the size of your list and the markup of your list items, this can be deadly to your app's performance.

Upvotes: 0

mohammad
mohammad

Reputation: 521

You should use unique ids in v-for key. A simple solution is to use index as your v-for key.

<div class="listWrapper" v-for="(list,index) in board.lists" :key="index" :data-list-id="list.id">

Upvotes: -1

Related Questions