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>

이런 느낌으로 표현되다.
나는 이 배열의 타이틀의 중복을 배제하고 싶다.

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

중복 제거됨!
Filter에서 세 개의 매개 변수를 찾을 수 있습니다.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: '小説' }
]

방금 전의 중복 처리가 진행 중이기 때문에, 표시된 결과는 아까와 같다.따라서 소설 속 타이틀은 중복 사용이 가능하다.

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의 타이틀이 소설이라면 처리에서 물러나세요.이렇게 하면 특정 문자열의 경우 중복될 수 있고 그 외에는 중복되지 않는다.

소설만 중복될 수 있다.
참고가 됐으면 좋겠어요.