WordPress + Nuxt.js でポートフォリオサイトを作る その2
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 { // 初期表示 or `All` を選択した場合 return this.posts } } } } </script>
<template>
は computed で絞り込んだ投稿からループする。
<template> <ul> <WorksItem v-for="(post,index) in filterWorks" :item="post" :key="index" /> </ul> </template>
残りやること
- 作業ファイルを src/ にまとめる
- データ登録・調整やスタインリング
- Netlify へホストする