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

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

ただいまの
回答率

90.12%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,588

holic

score 112

 前提・実現したいこと

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

 該当のソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>WP REST axiosテストページ</title>
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  </head>
  <body>
<div id="test1">
  <button v-on:click="getPosts()">記事取得</button>
  <ul v-for="post in posts">
    <li>
      <a v-bind:href="post.link" target="_blank">
        {{post.title.rendered}}<br>
        {{post.slug}}<br>
        {{post["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["full"]["source_url"]}}<br>
        {{post["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["thumbnail"]["source_url"]}}<br>
        {{post.acf.事務所}}<br>
        {{post.date}}

      </a>
    </li>
  </ul>
</div>

    <script type="text/javascript">
  new Vue( {
    el: '#test1',
    data: {
      posts: []
    },
    methods: {
      getPosts: function(){
        axios.get("http://026.test55.net/wp/wp-json/wp/v2/member/?_embed")
       .then( response => {
          this.posts = response.data;
        } )
        .catch( error => {
          window.alert( error );
        } );
      }
    }
  } )
    </script>

</body>
</html>

 試したこと

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

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

vue.js 2.5.16
axios
wp 4.9.2

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

    <script type="text/javascript">
  new Vue( {
    el: '#test1',
    data: {
      posts: []
    },
    created: function(){
        this.getPosts();
    },
    methods: {
      getPosts: function(){
        axios.get( 'http://026.test55.net/wp/wp-json/wp/v2/member/?_embed' )
        .then( response => {
          this.posts = response.data;
        } )
        .catch( error => {
          window.alert( error );
        } );
      }
    }
  } )
    </script>

createdを使うことで、インスタンスが作成された後に発動するという仕組みみたいです。
今回の場合はインスタンスが作成された後にメソッドgetPosts()が発動し、jsonデータがレンダリングされる仕組みです。
sakapun様ありがとうございます。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/28 16:21

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

    キャンセル

  • 2018/01/28 22:28

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

    キャンセル

  • 2018/02/02 02:20

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

    キャンセル

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

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる