Vue.jsでWP REST APIを用いて記事を取得する

Vue.jsでWordpress REST APIを用いてpostを取得して見た備忘録。
最終ゴールはNuxt.jsでWordpressのテーマを作成してみようと思います。

まず叩いてみる

公式ドキュメントを参考に

http://demo.wp-api.org/wp-json/wp/v2/posts

にアクセス

{
    "id": 1,
    "date": "2017-05-23T06:25:50",
    "date_gmt": "2017-05-23T06:25:50",
    "guid": {
        "rendered": "http://demo.wp-api.org/?p=1"
    },
    //中略
},...

とデータが取れる。

http://demo.wp-api.org/wp-json/wp/v2/posts/35

とにすればidが35の記事データを取得することができる。

Vue.js側

app.js

const Vue = require ('vue');
const axios = require ('axios');
const POST_END_POINT = 'your web site address';//適宜変更してください

const posts = new Vue ({
    el: '#posts',
    data: {
         posts: [],
    },
    mounted () {
        axios.get (POST_END_POINT + '/wp-json/wp/v2/posts')
            .then ((response) => {
                this.posts = response.data;
            }).catch (error = {
                console.error (error);
        });
    }
});

httpクライアントはaxiosでサクッと。

index.php

<ul>
        <li v-for="post in posts" class="post-list-item">
            <div>
                <a v-bind:href="post.link">
                    <h1>{{post<span class="hljs-selector-class">.title</span><span class="hljs-selector-class">.rendered</span>}}</h1>
                    <p>{{post<span class="hljs-selector-class">.excerpt</span><span class="hljs-selector-class">.rendered</span>}}</p>
                </a>
            </div>
        </li>
    </ul>

hrefでリンクをバインドするとエラーになるのでv-bind:hrefでリンクを渡してあげないといけないみたいです。

以上 ご参考までに