Q&A
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
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件
0
ベストアンサー
createdでうまくいきそうなので、うまくいかなかったコードは提示できますか？
これでできませんか？
created: function () { this.getPosts(); }
投稿2018/01/28 06:50
総合スコア888
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/28 07:21
2018/01/28 13:28
2018/02/01 17:20