Help us understand the problem. What is going on with this article?

Vue.js と WordPress REST API を使って投稿データを取得

More than 1 year has passed since last update.

概要

Vue.jsの学習のために、WP REST APIと連携してWordPressに投稿された記事を取得して表示するサンプルコードを作ってみました。JSONデータをajaxで取ってくる、SPA的なのをイメージしてます。

ajax通信部分はひとまずjQueryを使い、日付とリンク付き投稿タイトルを5件ずつ表示。ボタンをクリックすると次の5件を表示します。

デモ

デモ

仕様

Vue.js v2.5.13
jQuery v2.2.4
WordPress v4.9.4

実装

html
<div id="example">
    <ul v-for="posts of wpData">
        <li v-for="post of posts">
            <a target="_blank" v-bind:href="post.link">{{ post.date }}&emsp;{{ post.title.rendered }}</a>
        </li>
        </ul>
    <button class="sd-btn" v-on:click="wpJsonDataUpdate">次の投稿を取得する</button>
</div>
JavaScipt
let wpPost = new Vue({
    el: '#example',
    data: {
        wpData: [],
        arr:{
            pageNum : 1,
            perPage : '&per_page=5',
            APIurl : 'https://example.stella-design.biz/wp-json/wp/v2/posts?page=',
            maxPost: undefined
        }
    },
    methods: {
        getWpJsonData: function(){
            jQuery( () => {
                jQuery.ajax({
                    type: "GET",
                    url: this.arr.APIurl + this.arr.pageNum + this.arr.perPage,
                    dataType: "json"
                })
                .then( (data, status, xhr) => {
                    if(!this.arr.maxPost){
                        let responce_header = xhr.getResponseHeader('X-WP-TotalPages');
                        this.arr.maxPost = responce_header;
                        console.log('総ページ数: ' + this.arr.maxPost);
                    }
                    for(let i = 0; i < data.length; i++){
                        let date = new Date(data[i].date);
                        date = date.toLocaleDateString();
                        data[i].date = date;
                    }
                    this.wpData.push(data);

                },
                () => {
                    alert("通信エラー:データをロードできませんでした。");
                })
            })
        },
        wpJsonDataUpdate: function(){
            if( this.arr.pageNum === Number(this.arr.maxPost) ){
                alert("すべてのデータを取得しました。");
            } else {
                this.arr.pageNum++;
                this.getWpJsonData();
                console.log('現在の表示ページ数: ' + this.arr.pageNum);
            }
        }
    },
    created: function(){
        this.getWpJsonData();
        console.log('現在の表示ページ数: ' + this.arr.pageNum);
    }
});

解説

WordPressから投稿の情報と総ページ数を取得し、vueインスタンスのdataに格納。(総ページ数はJSONに含まれておらず、レスポンスヘッダから取得します。)

取得した投稿データはネスト構造になっているので、html側も同様に<ul v-for="posts of wpData">を親、<li v-for="post of posts">を子供としてv-forをネストしてhtmlをレンダリングします。

ボタンに<button v-on:click="wpJsonDataUpdate"> として投稿を取得するメソッドをバインディングします。

wpJsonDataUpdateメソッドでページ数をカウントしているので、総ページ数分の投稿を表示し終わるとその旨のアラートを出しています。

手間取ったところ

Vue.jsのお作法に慣れること、HTTPヘッダ、レスポンスヘッダについてよく知らなかった、v-forをネストするという発想がなかった、というあたりでしょうか。”ディレクティブ”などVue.js特有の機能がたくさんあるので、覚えなければ何もできないなと。

最後に

vueインスタンスにデータとメソッドを設置して、html側でイベント
をバインディングして呼び出す、というまぁ基本中の基本をやっと肌感覚でつかめた気がします。もっともっといろいろな機能を実装してみて、Vue.jsを楽しんで行きたいと思います。

kouichi_hoshi
HTML、CSS、JavaScript、WordPress構築やってます。JavaScriptで難しいことができるようになりたいです。札幌市在住。一児の父。
http://stella-design.biz/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away