WP REST API（axiosで読み込み）でページ読み込みと同時にレンダリングする

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
axiosとvue.jsを使ってwordpress REST APIの情報を呼び出したいです。
下記のソースでは
axiosとvue.jsを使って「ボタン」を押したらAPIがレンダリングされることろまでは成功しました。
このソースから次にページを読み込みと同時にレンダリングされる仕様にしたいのですが、どのようにしたらよいのか迷っております。
ご教示をお願いいたします。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <title>WP REST axiosテストページ</title>
6<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
7<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
8
9  </head>
10  <body>
11<div id="test1">
12  <button v-on:click="getPosts()">記事取得</button>
13  <ul v-for="post in posts">
14    <li>
15      <a v-bind:href="post.link" target="_blank">
16        {{post.title.rendered}}<br>
17        {{post.slug}}<br>
18        {{post["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["full"]["source_url"]}}<br>
19        {{post["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["thumbnail"]["source_url"]}}<br>
20        {{post.acf.事務所}}<br>
21        {{post.date}}
22
23      </a>
24    </li>
25  </ul>
26</div>
27
28    <script type="text/javascript">
29  new Vue( {
30    el: '#test1',
31    data: {
32      posts: []
33    },
34    methods: {
35      getPosts: function(){
36        axios.get("http://026.test55.net/wp/wp-json/wp/v2/member/?_embed")
37       .then( response => {
38          this.posts = response.data;
39        } )
40        .catch( error => {
41          window.alert( error );
42        } );
43      }
44    }
45  } )
46    </script>
47
48</body>
49</html>

試したこと

createdを使うのかと考えましたが実装がうまくいかず

補足情報（FW/ツールのバージョンなど）

vue.js 2.5.16
axios
wp 4.9.2

sakapun様にご教示いただき、解決したソースを示します。

javascript
1    <script type="text/javascript">
2  new Vue( {
3    el: '#test1',
4    data: {
5      posts: []
6    },
7    created: function(){
8    	this.getPosts();
9    },
10    methods: {
11      getPosts: function(){
12        axios.get( 'http://026.test55.net/wp/wp-json/wp/v2/member/?_embed' )
13        .then( response => {
14          this.posts = response.data;
15        } )
16        .catch( error => {
17          window.alert( error );
18        } );
19      }
20    }
21  } )
22    </script>
23
24createdを使うことで、インスタンスが作成された後に発動するという仕組みみたいです。
25今回の場合はインスタンスが作成された後にメソッドgetPosts()が発動し、jsonデータがレンダリングされる仕組みです。
26sakapun様ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

createdでうまくいきそうなので、うまくいかなかったコードは提示できますか？
これでできませんか？

created: function () {
  this.getPosts();
}

投稿2018/01/28 06:50

sakapun

総合スコア888

holic

2018/01/28 07:21

createdでmethodsの目的メソッドを呼び出すのですね、うまく表示ができました。 sakapun様ありがとうございます、フォローさせていただきました。

sakapun

2018/01/28 13:28

一応補足しておきますが、おそらくgetPostsの内容をコピペしていても動くはずですが、methodsで定義しておけばクリック時などにも使えて幅が広がるので、良いかなと思いました。

holic

2018/02/01 17:20

捕捉ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！