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 へホストする