Vue.jsでfilterを使って連想配列の重複削除を行いつつ、特定の値のときは重複させる処理

配列の値の重複を消す

このような配列があったとします。

data () {
  return {
    items: [
      { id: 1, title: '漫画' },
      { id: 2, title: '小説' },
      { id: 3, title: '漫画' },
      { id: 4, title: '漫画' },
      { id: 5, title: '雑誌' }
    ]
  }
}

HTML側

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

こんな感じで表示されてます。
この配列のtitleの重複を排除していきたいと思います。

created () {
  this.duplicate ()
},
methods: {
  duplicate () {
    this.items = this.items.filter((v1, i1, a1) => {
      return a1.findIndex(v => v1.title === v.title) === i1
    })
  }
}

重複が削除されました！
filterには3つ引数を取ることができます。v1は指定している配列のvalueになります。i1は指定している配列のindexです。a1は現在している配列そのものです。

特定の値だけは重複を許可する

次にこんな配列を用意しました。

items: [
  { id: 1, title: '漫画' },
  { id: 2, title: '小説' },
  { id: 3, title: '漫画' },
  { id: 4, title: '漫画' },
  { id: 5, title: '雑誌' },
  { id: 6, title: '小説' },
  { id: 7, title: '小説' }
]

先程の重複処理が走っているので表示される結果は先程と一緒です。そこでtitleが小説のときは重複させても良いことにしましょう。

methods: {
  duplicate () {
    this.items = this.items.filter((v1, i1, a1) => {
      if (v1.title === '小説') return true
      return a1.findIndex(v => v1.title === v.title) === i1
    })
  }
}

もしitemsのtitleが小説だったら処理から抜けるというコードです。これをすることによって特定の文字列の場合は重複ができるようになり、それ以外は重複させないといった処理を実現できます。

小説だけは重複できてますね。
参考になれば幸いです。