この記事を読みながら、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 + }) + } });
のように書き換える。すると
下の方にちらっと映っているようにレスポンスが得られる。これを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
という要素を指定することで参照するデータを制限している。
今、親コンポーネントは data
に type
と rankings
を持つ状態になったので、これを参照させるために 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
に配列で type
と rankings
を記載することで、外から type
と rankings
を受け取ることができるようになる。
また 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.type
を type
として、 data.rankings
を rankings
を受け取れるようになる。
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
を書いて、これを読ませると
Good Comment!