Vue CLI × Laravel × VuetifyでCSSいらずの爆速開発でTodoリストを作る part7

前回のパート

前回は、todoの新規登録機能を実装しました
今回は前回の登録した内容を初期描画で表示する機能の実装を行っていきます
前回のパートはこちら→Vue CLI × Laravel × VuetifyでCSSいらずの爆速開発でTodoリストを作る part6

Laravel側の実装

TodoController.phpのindex()アクションに機能を追加していきます
index()は/todoにGETリクエストを送ることで呼び出されます
index()に下記を追加してください

TodoController.php

public function index(Request $request)
{
    $data = Todo::where('user_id', $request->user()->id)->get();

    return $data;
}

$request->user()->idでログインしているユーザーのidをとtodoのuser_idを指定し
データを所得しているだけです

Laravel側の処理は以上です

次にVue側でそれを所得し表示させます

Vue側の実装

Todo.vueを開き下記を追加してください

Todo.vue

<template>
    <div>
        <Header />
        <div class="main-container">
            {{ user.name }}のTodoリスト

            <v-text-field v-model="text" label="todo" required></v-text-field>
            <v-btn class="btn" @click="create">登録</v-btn>

            <template v-for="item in items">
                <v-card max-width="450" class="mx-auto" style="marign-top: 10px" :key="item.id">
                    <v-list three-line>
                        <v-list-item :key="item.id">
                            <v-list-item-content>
                                <input type="text" v-model="item.text">
                                <v-btn small>完了</v-btn>
                            </v-list-item-content>
                        </v-list-item>
                    </v-list>
                </v-card>
            </template>
        </div>

    </div>
</template>

<script>
    import Header from './Header';
    import axios from 'axios';

    export default {
        components: {
            Header
        },
        metaInfo: {
            title: 'Todo',
            htmlAttrs: {
                lang: 'ja'
            }
        },
        created () {
            const user = this.$store.getters['auth/user'];
            if (user === null) {
                this.$router.push('/login');
            }

            axios.get('/api/todo')    //追加
            .then((res) => {
                this.items = res.data;
            });
        },
        computed: {
            user() {
                return this.$store.getters['auth/user'];
            }
        },
        data () {
            return {
                items: null,
                text: ''
            }
        },
        methods: {
            async create() {
                await axios.post('/api/todo', { text: this.text });

                axios.get('/api/todo/' + this.user.id)
                .then((res) => {
                    const newItem = res.data.slice(-1)[0];
                    this.items.push(newItem);
                })

                this.text = '';
            }
        }
    }
</script>

<style>
    .main-container {
        width: 500px;
        margin: auto;
    }
    .btn {
        margin-bottom: 20px;
    }
</style>

画面がレンダリングされる際に、created()を使い/api/todo/にgetリクエストを行い
Laravel側のルートで定義された/todoのindex()アクションを呼び出すようにしています
index()では、その指定されたユーザーのIDから該当するデーターを所得してreturnするように実装したので
Vue側ではそれを受け取り、dataのitemsに格納しています
後は、そのitemsの中身をv-forでループさせて表示させています

ここまでの実装で、前回登録した内容のデーターが表示されていれば
正常にできていることになります

また、一度todoの登録を行い新規で登録したものが追加されて表示されているか
確認してみてください

終わりに

今回はtodoの一覧表示機能を実装しました
残る機能は、todoの削除とtodoの更新になります
次回はtodoの削除(完了)を実装していこうと思います

次回のパートはこちら→Vue CLI × Laravel × VuetifyでCSSいらずの爆速開発でTodoリストを作る part8