I have tried adding the below methods to resolve this

1. used the index of the array to splice the item
2. created a unique key and used that to splice the item
3. used the filter method to delete the item

Still the issue was unresolved. Adding the code below

<div v-for="(item,key) in allFilters" v-bind:key="item.key">
  <Component />
  <button v-on:click="deleteFilterRow(item)">
</div>
<v-btn @click="addMore">Add more</v-btn>

data: () => ({
  uniqueKey: 0,
})

deleteFilterRow(val) {
  // this.allFilters.splice(val, 1); when passing the index
  this.allFilters = this.allFilters.filter(item => item.key !== val.key);
},

addMore() {
  this.allFilters.push({ key: this.uniqueKey   });
},

CodePudding user response：

I am not really sure where allFilters property comes from. You have provide it as prop or in data. I wrote some basic vue code that hopefully help you

<template>
  <div>
    <div v-for="(item, index) in allFilters" v-bind:key="index">
      {{ item }}
      <button @click="deleteRow(index)">Delete</button>
    </div>
    <button @click="addNewRow">Add new row</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      id: 1,
      allFilters: [{ key: 0 }],
    };
  },
  methods: {
    addNewRow() {
      this.allFilters.push({ key: this.id });
      this.id  ;
    },
    deleteRow(index) {
      this.allFilters.splice(index, 1);
    },
  },
};
</script>

CodePudding user response：

deleteFilterRow(val)
{
    let target = this.allFilters.find(item => item.key !== val.key);
    let index = this.allFilters.indexOf(target);
    this.allFilters.splice(index, 1);
}