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

如何解决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) |

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

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

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

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

<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',id})
}

//Mutation
deleteAsset: (state,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和数据，并且所有内容均可正确打印。似乎只是画布元素没有改变。

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

解决方法

假设cat_ID可以分配给多个资产，使用它作为key会遇到问题，因为如果cat_ID的话Vue将无法检测到列表更改在您的任何selectedList资产中重复进行。

由于您的资产具有ID属性，因此应在key中使用该属性

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

请参见key

key特殊属性主要用作Vue的虚拟DOM算法的提示，当将新节点列表与旧列表进行区分时，即可识别VNode。在没有键的情况下，Vue使用的算法可最大程度地减少元素移动，并尝试尽可能地就地修补/重复使用相同类型的元素。有了键，它将根据键的顺序更改来对元素重新排序，并且不再具有键的元素将始终被删除/销毁。