CODEWITHSUNDEEP
javascriptvue.js
MariaZ
MariaZ

Reputation: 1747

Vuejs removing element from array can not remove it completely

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

    }
};

Upvotes: 0

Views: 727

Answers (1)

niccord
niccord

Reputation: 844

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.

Upvotes: 2

Related Questions