hejianxian / vddl

🦄 Vue components for modifying lists with the HTML5 drag & drop API.
http://hejx.space/vddl
MIT License
395 stars 75 forks source link

Duplicate keys detected: { key }. This may cause an update error. #23

Open DmitryNeposidjaka opened 6 years ago

DmitryNeposidjaka commented 6 years ago

Hi, thanks for your great component!! I have caught a an error while trying to use your demo https://github.com/hejianxian/vddl/blob/master/example/src/views/simple.vue print of error: _107 How can I fix it? what more information I cant present to you ?

eklundkristoffer commented 6 years ago

I'm currently experiencing this as well, did you manage to solve it yet?

yyman001 commented 6 years ago

我使用内嵌electron 调用也是一样会出现这个问题,web没发现这个问题

yyman001 commented 6 years ago

@DmitryNeposidjaka @eklundkristoffer i am find a fix function,more msg look at https://github.com/hejianxian/vddl/issues/27

yyman001 commented 6 years ago

@eklundkristoffer @DmitryNeposidjaka @hejianxian 这次是发现了导致这个bug的原因和暂时解决方案。

hejianxian commented 6 years ago

@DmitryNeposidjaka @eklundkristoffer

In the newer version of vue, this error message does appear. I will find a way to fix this problem as soon as possible. Or you can lower the vue version first.

Zanzavar commented 6 years ago

Same problem here. Unfortunately i cannot downgrade as i need to use Vue 2.5 in order to implement subscribing to actions.

awulkan commented 6 years ago

@Zanzavar I think it was somewhere around 2.5.9 that this error log was introduced. So you can still be on 2.5.

Anyway, this error was probably always in VDDL, in the new Vue version they just decided to log it afaik.

JuniorNunes7 commented 6 years ago

I solved this problem defining a unique prefix to key:

<div v-for="(item, i) in items" :key="i"></div>

<div v-for="(item, i) in items2" :key="`A-${i}`"></div>

<div v-for="(item, i) in items3" :key="`B-${i}`"></div>
kjhatis commented 6 years ago
[Vue warn]: Duplicate keys detected: 'A-1'. This may cause an update error. 

After trying your solutiion it still says the same @JuniorNunes7

hejianxian commented 6 years ago

@kjhatis Try it.

https://github.com/hejianxian/vddl#warning

xyz-zz commented 6 years ago

Even if the value of the key is changed, the only existing ID attribute will still be wrong

<el-option v-for="(item, index) in roleOptions" :key="item.id" :label="item.roleName" :value="item.roleCode">

Tanyuta commented 6 years ago

Thank u, @JuniorNunes7, it solved my problem too.

mcisback commented 5 years ago

I solved this problem defining a unique prefix to key:

<div v-for="(item, i) in items" :key="i"></div>

<div v-for="(item, i) in items2" :key="`A-${i}`"></div>

<div v-for="(item, i) in items3" :key="`B-${i}`"></div>

thanks so much ! This solved my issue :D

xiooLoo commented 5 years ago

I solved this problem defining a unique prefix to key:

<div v-for="(item, i) in items" :key="i"></div>

<div v-for="(item, i) in items2" :key="`A-${i}`"></div>

<div v-for="(item, i) in items3" :key="`B-${i}`"></div>

谢谢了, 很有效果, 只要保证Array的:key不一致就不会有问题了😁

Lucascoml commented 5 years ago

Has anyone seen solve?

wenweih commented 5 years ago

@Lucascoml

add index for v-for when iterator

like <div v-for="(item, index) in items" :key="`item-${index}`"></div>

V-for with simple arrays: what key to use?

eeerrrttty commented 4 years ago

I solved this problem defining a unique prefix to key:

<div v-for="(item, i) in items" :key="i"></div>

<div v-for="(item, i) in items2" :key="`A-${i}`"></div>

<div v-for="(item, i) in items3" :key="`B-${i}`"></div>

Best answer, worked here!

korsino commented 4 years ago

I solved this problem defining a unique prefix to key:

<div v-for="(item, i) in items" :key="i"></div>

<div v-for="(item, i) in items2" :key="`A-${i}`"></div>

<div v-for="(item, i) in items3" :key="`B-${i}`"></div>

Worked! Thank you 🙌

marcelodmdo commented 4 years ago

In determinated case, we can have: post list (5 per page) when you create a new post, and append (or prepend) to reactive array, a new element is accounted for. When you scroll after that, you will see that have duplicated object (retrieved from backend, 6 insted 5) thats the error

houtianqi-ansin commented 3 years ago

I solved this problem defining a unique prefix to key:

<div v-for="(item, i) in items" :key="i"></div>

<div v-for="(item, i) in items2" :key="`A-${i}`"></div>

<div v-for="(item, i) in items3" :key="`B-${i}`"></div>

Thank you, I solved it.