Vue：从v-for列表中删除项目后将保留画布项目

这在标题中很难用词组表达，但是通过一些设置很容易解释。

我有一个组件列表。列表中的每个组件如下所示：

| [Canvas Preview] Name      (Delete button) |

每个组件都有一个小的canvas元素，用于显示项目的预览，它的名称，以及一个删除按钮以将其从列表中删除。v-for遍历的列表存储在Vuex中。

使用字母表示不同的预览图像，列表可能如下所示：

| [W] Item 1      (Delete button) |
| [X] Item 2      (Delete button) |
| [Y] Item 3      (Delete button) |
| [Z] Item 4      (Delete button) |

当按下删除按钮时，适当的项目将从列表中剪接出来，并且列表更新。名称会更新，然后单击它们会选择正确的项目。问题在于预览保持在相同位置。例如，如果我从上面的列表中删除了项目2（带有预览X），则将具有以下列表：

| [W] Item 1      (Delete button) |
| [X] Item 3      (Delete button) |
| [Y] Item 4      (Delete button) |

预览是WXY，自X删除以来应为WYZ。基本上，画布按相同的顺序保留，无论从何处删除项目，最后都将其删除。

我可以想到几种删除项目时重画所有画布的方法，但是我想知道是否有更好的解决方案。

编辑：这是删除项目的代码

项目上的删除按钮向列表组件发出事件

<button @click="deleteAsset">Delete</button>

deleteAsset(event){
    event.stopPropagation();
    this.isRenaming = false;
    this.$emit('deleteAsset', this.asset);
},

包装器然后派出Vuex动作

deleteAsset(asset){
    this.$store.dispatch('GameData/deleteAsset', {category: asset.category_ID, id: asset.ID});
    this.updateAsset();
},

Vuex动作和变异

//Action
deleteAsset({commit}, {category, id}){
    commit('deleteAsset', {category, id})
}

//Mutation
deleteAsset: (state, {category, id}) => {
    let curList = getList();
    let hasFound = false;

    for (let i = 0; !hasFound && i < curList.length; i++){
        if (curList[i].ID == id){
            curList.splice(i, 1);
            hasFound = true;
        }
    }
}

这是问题的屏幕截图：

其余数据是正确的，因为我添加了一个快速测试功能来在单击时打印当前ID和数据，并且所有内容均可正确打印。似乎只是canvas元素没有改变。

编辑2：vue代码

//List
<Asset
    ref="assets"
    v-for="asset in selectedList"
    :key="asset.cat_ID"
    :asset="asset"
    :defaultIcon="selected_category.icon"
    @deleteAsset="deleteAsset"
    @selectAsset="selectAsset"/>

//Asset code
<template>
    <div ref="asset" class="asset" :class="{selected : isSelected}" @click="selectAsset">
        <div class="leftFloat">
            <canvas v-show="hasThumb" class="thumbnail" ref="thumbNail" width="20" height="20">Test</canvas>
            <img v-if="!hasThumb" class="thumbnail assetIcon" :src="require(`@/${defaultIcon}.svg`)" />
            <div v-if="isRenaming">
                <input ref="renameText" v-model="asset.name" type="text" />
            </div>
            <div v-else>{{asset.name}}</div>
        </div>
        <div class="rightFloat">
            <button class="rightButton" @click="deleteAsset">
                <img class="rightIcon" src="@/assets/trash.svg" />
            </button>
        </div>
    </div>
</template>