Can you help me solve this issue with my Vue component setup?
I have a list of components, each consisting of a preview canvas, a name, and a delete button. These components are stored in Vuex.
For example, the list could look like this:
| [W] Item 1 (Delete button) |
| [X] Item 2 (Delete button) |
| [Y] Item 3 (Delete button) |
| [Z] Item 4 (Delete button) |
The problem arises when an item is deleted from the list. Although the names update correctly, the previews remain in their original positions instead of reordering. So if we delete "Item 2" (preview X), the list will show:
| [W] Item 1 (Delete button) |
| [X] Item 3 (Delete button) |
| [Y] Item 4 (Delete button) |
The previews should rearrange to match the updated list after deletion.
Any suggestions for a solution that doesn't involve redrawing all the canvases?
Here's some relevant code snippets:
Clicking on the delete button triggers the deleteAsset method:
<button @click="deleteAsset">Delete</button>
deleteAsset(event){
event.stopPropagation();
this.isRenaming = false;
this.$emit('deleteAsset', this.asset);
},
The emitted event is handled by a Vuex action:
deleteAsset(asset){
this.$store.dispatch('GameData/deleteAsset', {category: asset.category_ID, id: asset.ID});
this.updateAsset();
},
This action calls a mutation to remove the specified asset from the list:
//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;
}
}
}
If you want to see the issue visually, here is a screenshot: https://i.sstatic.net/y6bSa.png
The rest of the data updates correctly upon deletion, but the canvas elements do not reflect the changes. I suspect it's an issue within the Vue component logic.
Here's the relevant Vue code for reference:
//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>