在Vue中删除数组中的条目后列表未完全更新答案

【问题标题】：List not updating entirely after an entry from array is removed in Vue在Vue中删除数组中的条目后列表未完全更新
【发布时间】：2020-11-30 15:51:28
【问题描述】：

我有一个小卡片列表（所有卡片都具有相同的结构），它们显示来自商店的数据并在其中生成一些部分。当一张卡片被移除时，它下面的所有卡片都“向上滑动”并且数据随之移动，但图像和标题（均在每张卡片内部生成）保持原位，然后创建一堆错误标记的卡片（即卡片被正确删除，但 image 数据保持在原来的位置）。经过一些测试，我认为是image 没有更新。

目前我在data 中分配键值对，但我认为也许我应该使用computed() 或其他挂钩来在移除卡时触发更改。

这里是sn-ps的代码：

父组件

<template>
...

<div v-for="card in cards" :key="card.code">
    <Card :card="card" />
</div>

...
</template>
<script>
import store from './store';
import Card from './Card';
...
components: {
    Card
},
data() {
    return {
        cards : store.state.cards, 
    }
}

...
</script>

子组件（Card.vue）

<template>
...

<img :src="image.imgSrc" />
<div>
    <h3>{{ image.imgName }}</h3>
    <div>
        <button @click="removeCard(card[5])">Remove Card</button>
    </div>
</div>

...

<div v-for="data in card" :key="data.title">
    <p class="m-0">{{ data.title }}</p>
</div>

...
</template>

<script>
import store from "./store";

export default {
...

  props: {
    card: Array,
  },
  data() {
    return {
      removeCard: store.removeCard,
      cards: store.cards,
      image: {
          imgSrc: `https://somelink.com/image/${this.card[5].toLowerCase()}.png`,
          imgName: this.card[4],
      },
    };
  },
</script>

从状态中移除卡片

removeCard(id) {
    const { cards } = state;
    cards.splice(cards.findIndex(card => { return card[5] === id; }), 1);
  }

为了简单起见，我显然删除了很多逻辑，但我认为发生的事情应该相对明显。 cards 是这个结构的数组：

[
  [ {Object}, {Object}, {Object, {Object}, 'WholeName1', 'CardsUniqueCode1' ],
  
  [ {Object}, {Object}, {Object, {Object}, 'WholeName2', 'CardsUniqueCode2' ],

  ...
]

我希望这是有道理的，如果有什么我可以进一步解释的，请告诉我。

【问题讨论】：

这听起来像是一个组件重用问题。您是否尝试在Card 上添加key？例如，<Card :card="card" :key="card.code" />

标签： javascript vue.js vuejs2

【解决方案1】：

您可能应该使用 vuex 中的 mapState 将 store.state.cards 映射到计算属性。示例：

// parent component

import { mapState } from "vuex";

...
{...
  computed: {
   ...mapState(["cards"])
  }
}

【讨论】：