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) => v.tag).flat(1)
        return [...new Map(getTagList.map(v => [v.label, v])).values()]
      }
    }
  })

scripts

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