わすれっぽいきみえ

みらいのじぶんにやさしくしてやる

9日目: VueコンポーネントにGETリクエストの結果を読み込ませる

qiita.com

この記事を読みながら、GETリクエストの結果をVueコンポーネントに読み込ませるロジックを組む。
なおvue-resource のバージョンが上記記事のときより上がっている関係でQiitaの記事を読んだだけではうまく読み込むことができない。

昨日の記事で書いたようにAPIのモックはすでにできているので、そこにリクエストを投げる簡単なコードを書いてみる。
resources/assets/js/app.jsを

 const app = new Vue({
-    el: '#app'
+  el: '#app',
+  created: function() {
+    // GET request
+    var self = this
+    this.$http.get('http://localhost:8000/api/rankings').then((resource) => {
+        console.log(resource)
+    }, (resource) => {
+      // handle error
+    })
+  }
 });

のように書き換える。すると

f:id:kimikimi714:20161204193627p:plain

下の方にちらっと映っているようにレスポンスが得られる。これをVueコンポーネントバインドしたい。

上記app.jsをさらに以下のように修正する。

  const app = new Vue({
   el: '#app',
+  data: {
+    type: 'weekly',
+    rankings: [],
+  },
   created: function() {
     // GET request
     var self = this
     this.$http.get('http://localhost:8000/api/rankings').then((resource) => {
-        console.log(resource)
+      this.type = resource.body.type
+      this.rankings = resource.body.rankings
     }, (resource) => {
       // handle error
     })

これでdataにrankings APIの結果が入るようになる。

コンポーネントは直接親コンポーネントを参照することはできず、 props という要素を指定することで参照するデータを制限している。
今、親コンポーネントdatatyperankings を持つ状態になったので、これを参照させるために Listコンポーネントを変更する。

 <template>
 <div>
-  <rank></rank>
-  <rank></rank>
-  <rank></rank>
+  <rank v-for="rank in rankings" :rank="rank"></rank>
 </div>
 </template>

+<script>
+export default {
+  props: ["type", "rankings"],
+}
+</script>

props に配列で typerankings を記載することで、外から typerankings を受け取ることができるようになる。 また v-for ディレクティブいわゆるforeachで、渡した rankings でループを回すことになり、ここでは rankings の要素分だけ Rankコンポーネントが呼ばれるようになる。

Listコンポーネント自体にももちろん値をバインドする必要があるので、以下のように home.blade.phpを修正する。

 @section('content')
-<list></list>
+@verbatim
+<h1>{{ type }} ranking</h1>
+<list :type="type" :rankings="rankings"></list>
+@endverbatim
 @endsection

これでListコンポーネントはRootコンポーネントdata.typetype として、 data.rankingsrankings を受け取れるようになる。

APIの方をちょっと修正して

{"type":"weekly","rankings":[{"rank":1,"user":{"name":"kimikimi714","profileUrl":"https:\/\/github.com\/kimikimi714","imageUrl":"\/storage\/images\/kimikimi714.jpeg"},"comment":{"text":"Good comment!","file":"hoge.php","line":2,"reviewUrl":"https:\/\/github.com\/kimikimi714\/config\/pull\/2"}},{"rank":2,"user":{"name":"kimikimi714","profileUrl":"https:\/\/github.com\/kimikimi714","imageUrl":"\/storage\/images\/kimikimi714.jpeg"},"comment":{"text":"Good comment!","file":"hoge.php","line":2,"reviewUrl":"https:\/\/github.com\/kimikimi714\/config\/pull\/2"}}]}

を返すようにしたので、他のコンポーネントでもなんかいい感じにpropsを書いて、これを読ませると

f:id:kimikimi714:20161205230153p:plain

Good Comment!

ちゃんとAPIのレスポンスをコンポーネントで読めるようになった。