CODEWITHSUNDEEP
vue.jsvuex
Dastan Akhmetov
Dastan Akhmetov

Reputation: 97

v-for list is updated incorrectly after removing current element

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);
}

Upvotes: 2

Views: 1651

Answers (1)

Fifciuu
Fifciuu

Reputation: 864

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?

Upvotes: 4

Related Questions