【Vue.js】No.007 Vue.jsからWP REST APIにアクセスし、カテゴリーを取得してみた

概要

以前のサンプルではWordPress内の記事を取得してみましたが、今回はカテゴリー情報を引っ張ってみたいと思います。
カテゴリー情報のリクエスト先は以下のようになります。

http://hoge.com/wp-json/wp/v2/categories/

コードサンプル

「カテゴリー取得」というボタンが有り、ボタンが押下されたらWordPressからカテゴリー情報を取得するという形にしたいと思います。
今回もaxiosというのを使いまので、下記のように予めJSを読み込んでおきましょう。

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

カテゴリー情報をリスト表示させたいと思いますので、HTMLは以下のようになります。

<div id="test1">
  <button v-on:click="getCategories()">カテゴリー取得</button>
  <ul v-for="cat in categories">
    <li>
      <a v-bind:href="cat.link" target="_blank">
        {{cat.name}}（{{cat.count}}）
      </a>
    </li>
  </ul>
</div>

「カテゴリー取得」ボタンとカテゴリー名リンク付き（該当件数表示も）が表示されるリストが設けられている状態ですね。
それでは、JSは以下のようにします。

new Vue( {
  el: '#test1',
  data: {
    categories: []
  },
  methods: {
    getCategories: function(){
      axios.get( '/wp01/wp-json/wp/v2/categories/' )
      .then( response => {
        this.categories = response.data;
      } )
      .catch( error => {
        window.alert( error );
      } );
    }
  }
} )

「カテゴリー取得」ボタンが押下されて実行される関数がgetCategoriesですね。
この関数により取得してきたJSONが元から用意されているcategoriesという空の配列に格納されるという形になります。
後はHTML側でfor文を使いループさせるという流れです。

動作確認

「カテゴリー取得」ボタンを押してみると、動作が確認できます！

{{cat.name}}（{{cat.count}}）