2

Please can you help me, I don't know how to deal with that. I have list with items where each item is a component and has its own delete button.This button emits delete event which commits the key of current item to vuex store.Consequently in my vuex store simply splice of array is happened. The array itself is fine. But DOM shows only last deletion of row , not I clicked over. I used key in each component like in vue documentation . But my code is still doesn't work.
CentralPanel.vue(Parent)

div(v-for="(good,key) in goods" :key="key")
        goodItem(:goodProps="good" :goodsLength="goods.length" @update-row="updateChildRow($event)" @delete-item="$store.commit('goods/delete_current_good',key)")

goodItem.vue(child)

// All above just inputs
v-btn(@click="$emit('delete-item')" style={marginTop:'13px'})
        v-icon mdi-trash-can-outline

Store

delete_current_good : (state,key) => {
    let goodsArr = state.goodsArray;
    goodsArr.splice(key,1);
}
tony19
  • 125,647
  • 18
  • 229
  • 307
Dastan Akhmetov
  • 97
  • 9
  • What you showed so far should work. Which means the problem is not within code you've shown so far. Please create a [mcve] to allow others to help you find the source of the error. Use codesandbox.io (or similar) if you need a multi-file node based environment. – tao Apr 25 '20 at 11:30
  • I will show you thank you! – Dastan Akhmetov Apr 25 '20 at 11:31

1 Answers1

3

I believe, it is caused by a bad key in v-for. I see you are iterating over an array (because you've used splice) so the second argument is not key - it is index.

By key's property Vue distinguish elements in the loop. When you are using index as a key it cannot track items well. Change this to value unique for each element, e.g. good.someUniqueAttribute

There is description for this case: Why not always use the index as the key in a vue.js for loop?

Fifciuux
  • 766
  • 5
  • 8
  • 2
    Oh, thank you so much! I used Date().getTime() as my unique property in item object now is ok :)) – Dastan Akhmetov Apr 25 '20 at 11:47
  • Makes sense, and works for me! This is how I used date: `:key="something + '-' + new Date().toString()"` – Kalnode Jun 17 '22 at 16:51
  • The current date is unique on each rerender so Vue won't be able to update only what's necessary. You should find a unique identifier allows Vue to track entry e.g. ID from database. – Fifciuux Jun 22 '22 at 12:45