VueJ의 v-for에서 반복 요소 제거s

VueJ의 v-for에서 반복 요소 제거s

다음 코드를 사용하여 배열의 카테고리를 표시합니다.어레이에 중복된 카테고리가 포함되어 있을 수 있습니다.VueJ에서 원하는 요소만 선택할 수 있는 방법이 있습니까?

<li v-for="product in products">
{{product.category}}
</li>

어레이:

products: [
      { id: '1', title: 'Test 1', category: 'Test 3' },
      { id: '2', title: 'Test 2', category: 'Test 1' },
      { id: '3', title: 'Test 3', category: 'Test 2' },
      { id: '3', title: 'Test 4', category: 'Test 1' },
      { id: '5', title: 'Test 5', category: 'Test 3' }
    ]

원하는 고유한 값을 사용하여 계산된 속성을 생성할 수 있습니다.프로젝트에 Lodash를 포함시킬 경우

import uniq from 'lodash/uniq'
// ...snip

computed: {
  productCategories () {
    return uniq(this.products.map(({ category }) => category))
  }
}

템플릿에 추가

<li v-for="category in productCategories">
  {{category}}
</li>

---

Lodash(또는 기타 유틸리티 라이브러리)를 도입하고 싶지 않은 경우 동일한 기능을 사용하여

productCategories () {
  return [...new Set(this.products.map(({ category }) => category))]
}

주의: Vue.js는 이 명령을 반복할 수 없는 것 같아서 어레이로 변환했습니다.Set(또는 기타)Iterator).

계산된 속성을 생성할 수 있습니다.uniqProducts사용자 고유의 어레이가 반환됩니다.products, 다음의 변경을 실시할 필요가 있습니다.

HTML

<li v-for="product in uniqProducts">
  {{product.category}}
</li>

vue 인스턴스에서는 uniq 어레이를 가져오기 위해 모든 기술(여기 나열된 많은 기술)을 사용할 수 있는 계산된 속성을 작성해야 합니다.

_여기에는 lodash 또는 언더스코어를 사용할 수 있습니다.

computed: {
   uniqProducts () {
      return _.uniqBy(this.products, 'property')
   }
}

언급URL : https://stackoverflow.com/questions/41735043/remove-repeated-elements-from-v-for-in-vuejs