Vue.js + Laravelで記事一覧を作成する(フロント編 #2)

Vue.js + Laravelで記事一覧を作成する(フロント編 #2)

皆さんこんにちは!ラクミニです。

前回はフロントでvue.jsを使用できるように準備をしました。今回は、実際に画面を実装して記事を一覧で表示したいと思います!

前回と前々回の内容はこちら↓

https://enjoyworks.jp/tech-blog/5569

https://enjoyworks.jp/tech-blog/6014

1. ベースの作成

まずは、Vueコンポーネントを表示するために、一覧画面のベースを作成します。Laravelにデフォルトで含まれているresources/views/welcom.blade.phpファイルを書き換えます。

前回のブログでも説明した通り、app.jsファイル内の以下の箇所に、html内のどの部分を対象としてvueを使用するか定義しています。


const app = new Vue({
    el: '#app',
});

vueのコンポーネントを利用できるよう、body内のdivタグにid=appをつけます。

2. vueコンポーネントの作成

次にvueのコンポーネントを作成していきます。

2.1 Navbar.vueファイルの作成

resources/js/app.jsファイルの


Vue.component('example-component', require('./components/ExampleComponent.vue').default);

を、以下のように書き換えます。


Vue.component('navbar', require('./components/Navbar.vue').default);

この記述で、どのコンポーメント名にどのコンポーネントファイルの内容を表示するか定義しています。今回は、コンポーネント名をhtmlタグと同じnavbarとarticlesとしていますが、htmlタグと同じ名前である必要はありません。例えば、


Vue.component('test', require('./components/Sample.vue'));

と定義した場合、<test></test>で囲まれたタグ内にSample.vueの内容が表示されます。

Resources/js/componentsフォルダ配下に、Navbar.vueファイルを作成します。ファイルの中身は以下のように記述します。

.vueファイルの中身は必ずtemplateタグで囲む必要があります。

では、コンソールでnpm run devを実行して、ブラウザの表示を確認してみましょう。

※補足※ npm run devを実行すると、Laravel Mixというフロントのアセットをコンパイルするツールがresources/js/app.jsファイルをコンパイルし、public/js/app.jsを生成します。webpack.mix.jsファイルに、コンパイル対象のファイルと生成したファイルの出力先が記載されています。

無事にnavbarを表示できました!

2.2 Articles.vueファイルの作成

articlesの中身を表示させましょう。まず、resources/js/app.jsファイルに以下を追記します。


Vue.component('articles', require('./components/Articles.vue').default);

続いて、Resources/js/componentsフォルダ配下にArticles.vueファイルを作成します。ファイルの中身は以下のように記述します。

2.2.1 Articles.vueの解説(scriptタグ内)

vueインスタンスが生成されると、まずscriptのexport defaultにあるcreated()が実行されます。apiをコールしているのは、created()内で呼び出しているfetchArticlesメソッドです。取得したデータは 


this.articles = res.data;

でdata()内のarticlesに格納されます。

makePaginationメソッド内では、ページネーションを作ります。json形式で取得したデータのmetaとlinksを利用しています。


this.pagination = pagination;

でdata()内のpaginationに格納されます。

2.2.2 Articles.vueの解説(templateタグ内)

templateタグ内のpaginationから解説します。

v-bindはタグ属性の値をVueインスタンス内で定義した変数で表現する際に使います。pagination.prev_page_urlがfalseであればPreviousはdisableになります。同様に、pagination.next_page_urlがfalseであればNextはdisableになります。

@clickでは、clickイベントが実行されるとfetchArticlesメソッドが呼び出されます。@clickはv-on:clickという記述の略式で、v-on:はイベントのトリガーと呼び出す関数を定義する際に使います。

続いて、divタグ内の解説です。

v-forは、配列やオブジェクトの中身を反復表示させる際に使用します。(v-bind:keyの説明は次回に回します。)

3. 一覧の作成

一覧画面を表示する前に、ArticlesControllerを修正します。Indexメソッドの中身を以下の通りに書き換えます。


        //$articles = Article::paginate(15);
        $articles = Article::orderBy('created_at', 'desc')->paginate(5);

書き換えられたら、コンソールでnmp run devを実行して、画面を表示してみましょう。

apiで取得したデータをVue.jsを使って画面に一覧として表示することができました。

次回は最終回!記事一覧に投稿・編集・削除機能を実装します。

エンジョイワークスでは、一緒に働くデザイナー・エンジニアを募集中です!
採用情報はこちら
Wantedlyからもお待ちしております。

一覧へ戻る

最新記事