时间戳

首页 > 解决方案 > 如果 JavaScript 中的对象数组中有两个具有相同值的项目，如何删除一个项目？

javascript - 如果 JavaScript 中的对象数组中有两个具有相同值的项目，如何删除一个项目？

问题描述

所以我有我在 vuejs 中显示的卡片对象数组。

cardsFromBackEnd: [
  {
    id: 1,
    tickerName: 'IBM',
    tickerFullName: 'International Business Machines',
    benchMark: 121.3,
    totalReturn: 16.9,
    tradeReturn: -14.0,
    sharpeRatio: 0.0006,
    winRate: 28.2,
    date: 'Mon Oct 31',
    tags: ['IBM'],
  },
  {
    id: 2,
    tickerName: 'HP',
    tickerFullName: 'Hawlett-Packard',
    benchMark: 91.3,
    totalReturn: 10.9,
    tradeReturn: 23.2,
    sharpeRatio: 0.0006,
    winRate: 68.2,
    date: 'Sun Oct 30',
    tags: ['IBM'],
  },
  {
    id: 3,
    tickerName: 'Appl',
    tickerFullName: 'Apple',
    benchMark: 201.3,
    totalReturn: 110.9,
    tradeReturn: 173.2,
    sharpeRatio: 0.0006,
    winRate: 168.2,
    date: 'Sat Oct 29',
    tags: [],
  },
],

我在左下角显示保存在tags数组中的标签。

标签也有一个删除按钮。当卡片中有不同的标签时，只有被点击的那个标签被删除。但我的问题是，如果点击删除两张卡中具有相同值的标签，则该标签将从两张卡中删除。

这是标签的html

<vs-chip
  v-for="tag in cardData.tags"
  :key="tag.id"
  @click="remove(tag)"
  closable
  close-icon="delete"
  >
  {{ tag }}
</vs-chip>

这是点击事件

remove(tag) {
  eventBus.$emit('delTag', tag);
},

这是该删除方法的侦听器

// Deleting tag on clicked card
eventBus.$on('delTag', (tag) => {
    let cardTags = this.cardDetails.filter((card) => {
    if (card.tags.includes(tag)) {
      card.tags.splice(card.tags.indexOf(tag), 1);
    }
  });
});

有没有办法告诉只从点击它的卡片中删除该标签以将其删除？

谢谢你。

标签： javascripthtmlvue.jsecmascript-6

解决方案

将卡片和标签都传递给您的remove()方法和事件

<vs-chip
  v-for="tag in cardData.tags"
  :key="tag.id"
  @click="remove(cardData, tag)"
  closable
  close-icon="delete"
  >
  {{ tag }}
</vs-chip>

remove(card, tag) {
  eventBus.$emit('delTag', { card, tag })
},

eventBus.$on('delTag', ({ card, tag }) => {
  card.tags = card.tags.filter(cardTag => cardTag !== tag)

  // or

  card.tags.splice(card.tags.indexOf(tag), 1)
})

推荐阅读