.splice() 不断删除数组的最后一项

Question

I made a function on my form where I can add multiple file inputs for multiple images by clicking a button, this is working as expected. Now when I try to delete an input field with.splice it keeps deleting the last item of the array that my input fields are in, not the input field with the matching index. I have been trying to fix this issue for hours now, I just can't seem to find a solution. I hope someone can tell me what I'm doing wrong.

This is the method for adding a new input field:

addInputField() {

    i++

    this.values.links.push({
      id: i,
      url: ''
    });
  }

this is the code for deleting an input field:

deleteInputField(index) {

    this.values.links.splice(index, 1);

    const items = this.values.links.filter(item => {

      return item.id > index
    });

    items.forEach(function (item) {
      item.id = item.id -1;
    });
  }

This is the button that deletes the input field:

<v-icon
  medium
  v-if="link.id > 0"
  color="#FF0000"
  class="ma-4"
  @click="deleteInputField(link.id)"
>

Answer 1

links is an array of objects. You are not passing an index in that array, but an id inside the nested object.

<v-icon
  medium
  v-if="link.id > 0"
  color="#FF0000"
  class="ma-4"
  @click="deleteInputField(link.id)" // Change to index (mostly taken from v-for loop)
>

Answer 2

From the definition of the splice method, the first parameter is start:

The index at which to start changing the array. If greater than the length of the array, start will be set to the length of the array. If negative, it will begin that many elements from the end of the array (with origin -1, meaning -n is the index of the nth last element and is therefore equivalent to the index of array.length - n). If array.length + start is less than 0, it will begin from index 0.

If you step through the code you will realise that the id you are passing is not an actual index of the link in the links array but the id of the link which is greater than the length of the array

Answer 3

If you want to pass the id (link.id), just use this function.

function deleteInputField(itemId){
    this.values.links = this.values.links.filter(item => {
        return item.id !== itemId;
    });
}

This will loop through the array and return all but the one that has the same id as the itemId passed.

otherwise, just pass in the index from the v-for loop in the @click handler

deleteInputField(index) {
    this.values.links.splice(index, 1);
  }

Answer 4

The ID is not the index if you need to pass the index to the deleteInputField function you can delete the desired input field by this.values.links.splice(index, 1);