Vue.js / JSON から情報を引っ張ってくる その2
やること
- WordPress の記事一覧を WP REST API を用いてエンドポイントを作成
- Vue.js で記事タイトルの一覧を表示させる
セットアップ
Vue CLI を使用。前回と同じ工程。
エンドポイント
こちらも前回と同様に WordPress の wp-json
を使用します。
REST API の有効化
投稿にフィルターをかけてエンドポイントを作れるように、WordPress REST API プラグインをインストールします。
特定のカテゴリーの一覧記事を取得する場合、 filter[]=
は以前のバージョンの仕様ということなのっで、REST API Handbook を眺めつつ下記も参考にしました。
WP REST API でブログからお知らせカテゴリ記事を取得してみる【WordPress】【Python】 | Cosnomi Blog
エンドポイントの JSON URL
https://blog.yuheijotaki.com/ の Develop
カテゴリー一覧記事は、 https://blog.yuheijotaki.com/wp-json/wp/v2/posts?categories=2
となります。
これに per_page
で表示件数を変更したり、いろいろできる。
参考:REST API Handbook | Posts | Arguments
Vue.js 側の処理
下記にやってみたいことがだいたいありました。
《WordPress》2017 年末に WP REST API で取得して Vue.js で描画するまでのまとめ。 - Qiita
App.vue
一部省略
<template> <div id="app"> <ul> <li v-for="post in posts" :key="post.title.rendered"> <a :href="post.link" v-html="post.title.rendered"></a> <!-- <pre v-html="post.content.rendered"></pre> --> </li> </ul> <button>次の記事を読み込む</button> </div> </template> <script> export default { name: "App", data() { return { posts: [], page: 0, loading: false, disabled: false }; }, mounted() { this.page = 1; }, watch: { page() { const url = `https://blog.yuheijotaki.com/wp-json/wp/v2/posts?categories=2&page=${ this.page }`; (async () => { try { const res = await axios.get(url); this.posts = this.posts.concat(res.data); this.loading = false; } catch (error) { console.log(error); this.empty(); } })(); } }, methods: { load() { this.loading = true; this.page++; }, empty() { this.loading = false; this.disabled = true; } } }; </script>
まとめ
- .vue ファイルの編集は Qiita の参考記事を元に少しいじった程度なのでスクラッチで自分が書くのは難しい。。
- なので Vue.js より REST API のほうが詰まった。ただ
const res = await axios.get(url);
あたりは定型文的なものなのかなと思いました。 - 次回はカテゴリー一覧出力してクリックしたら記事一覧を表示をやる。