Sample List

【Vue.js】No.006 Vue.jsからWP REST APIにアクセスし、記事を取得してみた

概要

WP REST APIというのがあり、詳細はこちらでは省きますが…あるURLにアクセスするとWordPressの投稿情報等がJSONで返ってくるというものです。
例えば… 

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

hoge.com直下にWordPressが設置されていると仮定した場合、上記URLにアクセスするとWordPress内の投稿情報がJSONで返ってきます。

WordPressバージョン4.7より前の場合は、別途プラグインが必要でしたが、4.7以降は標準装備となりました。

コードサンプル

「記事取得」というボタンが有り、ボタンが押下されたらWordPressから記事を取得するという形にしたいと思います。
また、Vue.jsでJSONを取得するため今回は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="getPosts()">記事取得</button>
  <ul v-for="post in posts">
    <li>
      <a v-bind:href="post.link" target="_blank">
        {{post.title.rendered}}
      </a>
    </li>
  </ul>
</div>

「記事取得」ボタンとタイトルリンクが表示されるリストが設けられている状態ですね。
それでは、JSは以下のようにします。 

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

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

動作確認

「記事取得」ボタンを押してみると、動作が確認できます！

一覧に戻る