У меня есть массив объектов, каждый из которых имеет URL-адрес, который загружается в этот файл:
<template>
<div>
<img :key="id" :src="img" alt="" class="image box" @click="cardClicked" />
</div>
</template>
<script lang="ts">
export default {
props: ["id", "value", "type", "owner", "imgURL"],
data() {
return {
img: require(`./../assets/${this.imgURL}.png`)
};
},
methods: {
cardClicked() {
this.$store.commit("addCardToPlayer", {
id: this.id,
type: this.type,
value: this.value,
owner: this.owner
});
}
}
};
</script>
В мутации Store я предварительно фильтрую и , а при добавлении добавляю карта другому игроку, например так:
addCardToPlayer(state, clickedCard) {
const owner = clickedCard.owner;
const type = clickedCard.type;
const currPlayer = state.currentPlayerName;
if (clickedCard.owner === "deck") {
state.cardOwners[owner].cards[type] = state.cardOwners[owner].cards[
type
].filter(card => {
if (card.id === clickedCard.id) {
state.cardOwners[currPlayer].cards[type].push(card);
return false;
} else return true;
});
}
},
При нажатии на карту, которую необходимо удалить, я вижу, что карта добавляется в плеер и отображается правильно, а количество карт, отображаемых после удаления, является правильным.
Но
Удаленная карта все еще показывает.
Что я пробовал:
Форсирование для повторного рендеринга используйте:
cardClicked() {
this.$store.commit("addCardToPlayer", {
id: this.id,
type: this.type,
value: this.value,
owner: this.owner
});
this.$forceUpdate();
}
Создание ключа для разных компонентов и попытка изменить ключ для повторного рендеринга:
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;<br>
}
}
Попытка изменить способ изменения массива путем создания нового состояния.
РЕДАКТИРОВАТЬ: Попытка с использованием вычислений. я получаю сообщение об ошибке:
TypeError: Cannot read property 'imgURL' of undefined
computed: {
getImg: () => {
return require(`./../assets/${this.imgURL}.png`);
}}
РЕДАКТИРОВАТЬ: я написал вычисляемую функцию как функцию стрелки, которая не сохраняет контекст.
решено с помощью
computed: {
getImg() {
return require(`./../assets/${this.imgURL}.png`);
}}
Как я могу обновить изображения после нажатия (удаления).
Спасибо.