Vue : v-for 목록에서 항목을 제거하면 캔버스 항목이 남습니다.

이것은 제목에서 표현하기 어렵지만 일부 설정으로 설명하기는 매우 쉽습니다.

구성 요소 목록이 있습니다. 목록의 각 구성 요소는 다음과 같습니다.

| [Canvas Preview] Name      (Delete button) |

각 구성 요소에는 항목의 미리보기를 표시하는 데 사용되는 작은 캔버스 요소, 이름 및 목록에서 제거하기위한 삭제 버튼이 있습니다. 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와 데이터를 인쇄하고 모든 것이 올바르게 인쇄되는 빠른 테스트 기능을 추가했기 때문에 나머지 데이터는 정확합니다. 변경되지 않는 것은 캔버스 요소 일뿐입니다.

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