Edited at

Movable Type の Data API から取得したJSONデータを Vue.js で 表示する

More than 1 year has passed since last update.

最近何かと話題の Vue.js。Movable Type と組み合わせて、ちょっと触ってみました。


やること

Movable Type の Data API から、記事データを取得する。

Vue.js を使って、記事のタイトルデータをループ処理して表示する


流れ


  1. XMLHttpRequestで Movable Type のData API から記事データをJSONで取得する

  2. Vue.jsでJSONデータを読み込み、タイトルだけを<ul>でループ表示する


コード

下記のコードで、記事のタイトルをループ表示できました。

<!DOCTYPE html>

<html lang="ja">
<head>
<title>Vue.js でMovable Type から記事タイトルを表示するサンプルコード</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>

<script>

// XMLHttpRequest 用の変数を定義する

let xhr = new XMLHttpRequest();

// html読み込み時に Movable Type の Data APIへアクセスし、JSONデータを取得

xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status == 200) {

// 取得したJSONデータを、変数 entries へ格納
const entries = this.response;

// 変数 entries を利用して、Vue.js のインスタンスを生成

const example1 = new Vue({
el: '#example-1',
data: entries
})
}
}

// Movable Type のData APIから取得するデータを定義。今回は記事データを取得。

xhr.open('GET', 'http://MTのDataAPIのurl/v3/sites/ブログID/entries', true);
xhr.responseType = 'json';
xhr.send(null);
</script>

</head>

<body>

<ul id="example-1">
<li v-for="item in items">
{{ item.title }}
</li>
</ul>

</body>
</html>


参考URL

https://jp.vuejs.org/v2/guide/list.html

https://www.movabletype.jp/developers/data-api/

https://www.movabletype.jp/developers/data-api/v3-reference.html


備考

Vue.js で REST API から何かデータを取得する場合、別ライブラリの[vue-resource]というライブラリを使っていたようですが、現在は推奨から外れているとのこと。

https://jp.vuejs.org/2016/11/03/retiring-vue-resource/

Vue.js を使ってAjax 通信を行うには、XMLHttpRequestやjQueryなどの、別ライブラリで行う必要があるようです。

(そのうちVue.jsにAjax通信用のライブラリか何かが実装されるのかもしれないけど)