Trying to execute the code below, I encountered an issue where removing one item from the array did not completely remove it (other checkboxes in each row remained). I attempted using :key="index" but that did not solve the problem. However, changing :key="index" to :key="item" worked, although it resulted in a warning message: [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);
},
}
};