Vue.js 删除图像时，上次删除的图像保持不变（无重新渲染）

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

单击要移除的卡时，我看到该卡已添加到播放器并正确显示，并且移除后显示的卡数正确

但是

被移除的卡片仍然显示

我试过什么：

• 使用以下命令强制重新渲染：

  cardClicked（）{
  此.$store.commit（“addCardToPlayer”{
  id:this.id，
  type:this.type，
  value:this.value，
  主人：这个。主人
  });
  这是.$forceUpdate（）；
  }

• 使不同组件具有关键点，并尝试更改关键点以导致重新渲染：

  data（）{
  返回{
  componentKey:0，
  };
  },
  方法：{
  forcerender（）{
  this.componentKey+=1；
  
  }
  }

• 尝试通过创建新状态来更改阵列的更改方式

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

  TypeError:无法读取未定义的属性“imgURL”

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

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

通过使用

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

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

谢谢。

通过使用

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

---

当你点击一张牌时，它应该被添加到另一个玩家（据我所知是这样发生的），并从点击的玩家中删除？我认为问题在于您正在改变存储的状态，但它没有反映在组件中，因为您将

img

prop注册为data（）属性，并且它应该是计算属性。试试看way@LautaroRamos，我试过了，但是我得到了未定义的属性imgURL。也许我用错了？

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