WordPressサイト（http://works.yuheijotaki.com/）の REST API と Nuxt.js でポートフォリオサイトを作成する。その2
GitHub: https://github.com/yuheijotaki/works-nuxt
クリックイベントと $emit / props
コンポーネント名を Filter.vue にしようと思ったのですが、予約語だったので Search.vue に修正
コードは下記ですが一部省略
components/Search.vue ではクリックしたカテゴリーを $emit する
<template>
<div>
<ul>
<li><a @click="clickedCategoryEvent('All')">All</a></li>
<li><a @click="clickedCategoryEvent('Front-end')">Front-end</a></li>
<li><a @click="clickedCategoryEvent('WordPress')">WordPress</a></li>
<li><a @click="clickedCategoryEvent('Web Design')">Web Design</a></li>
<li><a @click="clickedCategoryEvent('Tumblr')">Tumblr</a></li>
</ul>
</div>
</template>
<script>
export default {
methods: {
clickedCategoryEvent(category) {
this.$emit('clickedCategory',category);
}
}
}
</script>
一度 pages/index.vue で受け取り、 components/WorksList.vue へ props する
<template>
<div>
<Search @clickedCategory="selectedCategory" />
<WorksList :filterCategory="propsCategory" />
</div>
</template>
<script>
export default {
...
data () {
return {
category: 'All'
}
},
methods: {
selectedCategory (category) {
this.category = category
}
},
computed: {
propsCategory: function() {
return this.category
}
}
}
</script>
components/WorksList.vue で受け取る
<script>
export default {
...
props:{
'filterCategory': {
type: String,
default: 'All'
}
},
...
}
</script>
クリックされたカテゴリーを絞り込み表示
components/WorksList.vue
mounted :function(){ にてAPIから投稿を引っ張ってきて
computed: {... にてpropsしてきたカテゴリーに属する投稿をフィルタリング
...
<script>
import axios from "axios";
export default {
name: 'WorksList',
components: {
WorksItem
},
props:{
'filterCategory': {
type: String,
default: 'All'
}
},
data () {
return {
posts: []
}
},
mounted :function(){
axios.get( 'https://works.yuheijotaki.com/wp-json/wp/v2/posts?per_page=100' )
.then( response => {
this.posts = response.data
})
.catch( error => {
console.log(error)
})
},
computed: {
filterWorks: function() {
const posts = this.posts
const filterCategory = this.filterCategory
if ( filterCategory !== 'All' ) {
return this.posts.filter( function( post ) {
if ( post.category_name.indexOf(filterCategory) >= 0 ) {
return post
}
})
} else {
return this.posts
}
}
}
}
</script>
<template> は computed で絞り込んだ投稿からループする。
<template>
<ul>
<WorksItem
v-for="(post,index) in filterWorks"
:item="post"
:key="index"
/>
</ul>
</template>
残りやること
- 作業ファイルを src/ にまとめる
- データ登録・調整やスタインリング
- Netlify へホストする
