[Vuejs]-VUE detect key press and duplicate keys detected error

This is an issue with v-for, not with your event listener.

Vue is complaining that some of the items in your v-for loops have a duplicate key – a key with value 3.

This is an issue because Vue uses keys to manage node updates of the list items. Effectively, Vue uses the keys to compute a diff between two node trees to see which components have changed and how.

If two or more elements in the same list have the same key, Vue will not be able to uniquely track changes in state/component order.

This can lead to conflicts and rendering errors when you start moving/updating elements in the list.

Edit:

Afterlooking at your update, I can see you’re setting your key using :key="item.id"

This error is because two or more of your items have the same ID – 3.

I recommend being careful with the index approach as suggested by the other answer. Using the index in this way can lead to issues with VueJS tracking the components if they are re-ordered.

If there is no way to sort/re-order this list then this is okay, but otherwise it’s not advised.

It looks like you’ve two or more ids that equal to 3, so you should make the key attribute value unique as follows :

<app-timeline-item
          v-for="(item,index) in array"
          :key="item.id+index" 
         ....