vue.js - 删除图像时，最后一个删除的图像会保留（不重新渲染）

Question

我有一个对象数组，每个对象都有一个正在加载到此文件中的 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>

在存储突变中，我执行过滤，并在过滤时将卡片添加到另一个玩家，如下所示：

 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;
} }

• 尝试通过创建新状态来更改我更改数组的方式。

• 编辑：尝试使用计算。我收到一个错误：

  TypeError: Cannot read property 'imgURL' of undefined

  computed: {
  getImg: () => {
    return require(`./../assets/${this.imgURL}.png`);
  }}
  

编辑：我将计算函数写为箭头函数，它不保留上下文。

解决了，通过使用

     computed: {
    getImg() {
      return require(`./../assets/${this.imgURL}.png`);
    }}

单击（删除）后如何使图像更新。

谢谢。

标签： vue.jsvuejs2

Answer 1

解决了，通过使用

 computed: {
getImg() {
  return require(`./../assets/${this.imgURL}.png`);
}}