Skip to content

Instantly share code, notes, and snippets.

@redamoon
Created Jul 28, 2021
Embed
What would you like to do?
poPLzzd
<div id="app">
<div v-for="(v, i) in fliterTagList">
<div>{{ v.label }}</div>
</div>
</div>
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)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment