.splice() 不斷刪除數組的最后一項

Question

我在表單上創建了 function，我可以通過單擊按鈕為多個圖像添加多個文件輸入，這按預期工作。 現在，當我嘗試使用 .splice 刪除輸入字段時，它會不斷刪除我的輸入字段所在的數組的最后一項，而不是具有匹配索引的輸入字段。 我已經嘗試解決這個問題幾個小時了，我似乎無法找到解決方案。 我希望有人能告訴我我做錯了什么。

這是添加新輸入字段的方法：

addInputField() {

    i++

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

這是刪除輸入字段的代碼：

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

這是刪除輸入字段的按鈕：

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

Answer 1

links是一個對象數組。 您不是在該數組中傳遞索引，而是在嵌套的 object 中傳遞一個 id。

<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

從splice方法的定義來看，第一個參數是start：

開始更改數組的索引。 如果大於數組的長度，start 將被設置為數組的長度。 如果為負數，它將從數組末尾開始那么多元素（原點 -1，意味着 -n 是倒數第 n 個元素的索引，因此等效於 array.length - n 的索引）。 如果 array.length + start 小於 0，它將從索引 0 開始。

如果您單步執行代碼，您將意識到您傳遞的 id 不是 links 數組中鏈接的實際索引，而是大於數組長度的鏈接 id

Answer 3

如果要傳遞 id（link.id），只需使用這個 function。

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

這將遍歷數組並返回除與傳遞的 itemId 具有相同 id 的數組之外的所有數組。

否則，只需從 @click 處理程序中的 v-for 循環傳入索引

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

Answer 4

如果需要將索引傳遞給 deleteInputField function，則 ID 不是索引，您可以通過this.values.links.splice(index, 1);