poPLzzd

index.html

  <div id="app">
    <div v-for="(v, i) in fliterTagList">
      <div>{{ v.label }}</div>
    </div>
  </div>

poplzzd.markdown

poPLzzd

A Pen by redamoon on CodePen.

License.

script.js

const endpoint = {
    "contents": [
      {
        "tag": [
          {
            "id": "4-p2z49d-2na",
            "createdAt": "2021-07-26T13:49:21.242Z",
            "updatedAt": "2021-07-26T13:49:21.242Z",
            "publishedAt": "2021-07-26T13:49:21.242Z",
            "revisedAt": "2021-07-26T13:49:21.242Z",
            "label": "Next.js",
            "slug": "Nextjs"
          },
          {
            "id": "4-p2z49d-2na",
            "createdAt": "2021-07-26T13:49:21.242Z",
            "updatedAt": "2021-07-26T13:49:21.242Z",
            "publishedAt": "2021-07-26T13:49:21.242Z",
            "revisedAt": "2021-07-26T13:49:21.242Z",
            "label": "Movable Type",
            "slug": "Movabletype"
          }
        ]
      },
      {
        "tag": [
          {
            "id": "4-p2z49d-2na",
            "createdAt": "2021-07-26T13:49:21.242Z",
            "updatedAt": "2021-07-26T13:49:21.242Z",
            "publishedAt": "2021-07-26T13:49:21.242Z",
            "revisedAt": "2021-07-26T13:49:21.242Z",
            "label": "Next.js",
            "slug": "Nextjs"
          }
        ]
      }
    ],
    "totalCount": 2,
    "offset": 0,
    "limit": 10
  }

const vm = new Vue({
    el: '#app',
    data() {
      return {
        data: endpoint
      }
    },
    computed: {
      fliterTagList() {
        const getTagList = this.data.contents.map((v, i) => {
          const tagList = v.tag.map(tag => {
            return {
              label: tag.label,
              slug: tag.slug
            }
          })
          return tagList
        })
        return getTagList.flat(1).filter((item, index, array) => array.findIndex(item2 => item.label === item2.label) === index)
      }
    }
  })

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>