Vuejs removing element from array can not remove it completely

Question

When I try to run the following code, and I remove one item from the array, the item is not removed completely(there are other checkboxes part of each row which are not removed) I have added a :key="index" and doesn't help it. Nevertheless when I have changed the :key="index" to :key="item" it works, but then the problem is I get the warning [Vue warn]: Avoid using non-primitive value as key, use string/number value instead

<template>
  <div>
    <filters-list-item v-for="(item, index) in items" :key="index" v-on:deleteItem="deleteItem(index)" :items="items" :item="item"  :filterButtonSetting="filterButtonSetting" class="pb-3 pt-3 space-line"></m-filters-list-item>
    <div class="pt-3">
        <button class="btn" @click="add()">
            add
        </button>
    </div>
  </div>
</template>

<script>
import FiltersListItem from './FiltersListItem';

export default {
    name: 'FiltersList',
    components: {
        FiltersListItem
    },
    props: {
        items: Array,
        filterButtonSetting: Object
    },
    methods: {
        add() {
            this.items.push({});
        },
        deleteItem(index) {
            this.$delete(this.items, index);
        },

    }
};

You should definitely not use the index as the key in general but especially when moving or deleting items. If your backend hasn't provided IDs create them at the point of receiving the data. — nanobar
– nanobar, Commented Sep 10, 2019 at 10:59
That is very interesting... do you probably know of an example? thank you very much in advance — MariaZ
– MariaZ, Commented Sep 10, 2019 at 11:02
Perhaps a filter on the array? Something like: this.items = this.items.filter(i => i.id !== itemToDelete.id) — user5283119
– user5283119, Commented Sep 10, 2019 at 11:03
You can use something like uuid library, import uuid from 'uuid/v4' and items = data.map(item => ({ ...item, id: uuid() })) — nanobar
– nanobar, Commented Sep 10, 2019 at 11:32

niccord · Accepted Answer · 2019-09-10 10:53:35Z

2

Using the index is fine as long as you are not interacting with any of the elements in the loop.

But, if you are, then it is recommended not to do this.

You should use another unique item's identifier, maybe providing one from the backend.

answered Sep 10, 2019 at 10:53

niccord

8445 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs removing element from array can not remove it completely

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related