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

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

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

方法1：使用 v-for 的 index 自動(dòng)更新

Vue 會(huì)自動(dòng)處理 v-for 中的索引，當(dāng)你移除一個(gè)元素后，剩余元素的索引會(huì)自動(dòng)更新：

<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：使用唯一標(biāo)識(shí)而非索引作為 key

最佳實(shí)踐是使用唯一標(biāo)識(shí)作為 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：計(jì)算屬性維護(hù)索引

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

<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>

注意事項(xiàng)

避免直接使用索引作為 key，這可能導(dǎo)致渲染問題

Vue 會(huì)自動(dòng)更新 v-for 中的索引，所以通常不需要手動(dòng)處理

如果需要在移除后執(zhí)行其他操作，可以使用 watch 或 watchEffect 監(jiān)聽列表變化

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解如何去除vue項(xiàng)目中的#——History模式
這篇文章主要介紹了詳解如何去除vue項(xiàng)目中的#——History模式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
詳解Vuex中g(shù)etters的使用教程
在Store倉庫里，state就是用來存放數(shù)據(jù)。如果很多組件都使用這個(gè)過濾后的數(shù)據(jù)，我們是否可以把這個(gè)數(shù)據(jù)抽提出來共享？這就是getters存在的意義。我們可以認(rèn)為，getters是store的計(jì)算屬性。本文將具體介紹一下getters的使用教程，需要的可以參考一下
2022-01-01
Vue-Router2.X多種路由實(shí)現(xiàn)方式總結(jié)
下面小編就為大家分享一篇Vue-Router2.X多種路由實(shí)現(xiàn)方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue項(xiàng)目總結(jié)之文件夾結(jié)構(gòu)配置詳解
這篇文章主要給大家總結(jié)介紹了關(guān)于vue項(xiàng)目之文件夾結(jié)構(gòu)配置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-12-12
vue 之 css module的使用方法
這篇文章主要介紹了vue 之 css module的使用方法，css module目的為所有類名重新生成類名，有效避開了css權(quán)重和類名重復(fù)的問題，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-12-12
從Element日期組件源碼中學(xué)到的兩個(gè)工具方法技巧
這篇文章主要介紹了從Element日期組件源碼中學(xué)到的兩個(gè)工具方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-08-08
簡單聊一聊vue中data的代理和監(jiān)聽
這篇文章主要給大家介紹了關(guān)于vue中data的代理和監(jiān)聽的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-09-09
vue模塊移動(dòng)組件的實(shí)現(xiàn)示例
這篇文章主要介紹了vue模塊移動(dòng)組件的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
前端H5微信支付寶支付實(shí)現(xiàn)方法(uniapp為例)
最近上線一個(gè)項(xiàng)目,手機(jī)網(wǎng)站進(jìn)行調(diào)起支付寶App支付,做起來還是滿順手的,在此做個(gè)記錄,這篇文章主要給大家介紹了關(guān)于前端H5微信支付寶支付實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下
2024-04-04
el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的操作方法
在element?ui中的日期時(shí)間選擇組件中默認(rèn)是00:00,現(xiàn)在需求是點(diǎn)擊默認(rèn)結(jié)束時(shí)間為當(dāng)前時(shí)分秒,查了很多資料寫的都不準(zhǔn)確?,今天給大家分享el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的操作方法,感興趣的朋友一起看看吧
2024-01-01