Vue3列表移除元素后索引更新實現(xiàn)方法

更新時間：2025年07月30日 09:10:05 作者：滿

這篇文章主要介紹了Vue3列表移除元素后索引更新實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

方法1：使用 v-for 的 index 自動更新

Vue 會自動處理 v-for 中的索引，當你移除一個元素后，剩余元素的索引會自動更新：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        {{ item.name }} (Index: {{ index }})
        <button @click="removeItem(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
]);

function removeItem(index) {
  items.value.splice(index, 1);
}
</script>

方法2：使用唯一標識而非索引作為 key

最佳實踐是使用唯一標識作為 key，而不是索引：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
        <button @click="removeItem(item.id)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
]);

function removeItem(id) {
  items.value = items.value.filter(item => item.id !== id);
}
</script>

方法3：計算屬性維護索引

如果需要存儲索引而不想它隨列表變化而改變，可以使用計算屬性：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in itemsWithStableIndex" :key="item.id">
        {{ item.name }} (Original Index: {{ item.originalIndex }})
        <button @click="removeItem(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
]);

const itemsWithStableIndex = computed(() => {
  return items.value.map((item, index) => ({
    ...item,
    originalIndex: index
  }));
});

function removeItem(index) {
  items.value.splice(index, 1);
}
</script>