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

#前回のパート
前回はtodoの一覧表示機能を作成しました
今回はtodoの完了時に押す削除機能を実装していきます
前回のパートはこちらVue CLI × Laravel × VuetifyでCSSいらずの爆速開発でTodoリストを作る part7

#Laravel側の実装
todoの削除を行うのはTodoController.phpのdestroy()アクションを利用します
destroy()アクションの中身の実装をやっていきます
TodoController.phpを開きdestroy()アクションに下記を追加してください

TodoController.php

public function destroy($id)
{
    Todo::find($id)->delete();
    return response('', 200);
}

これでdestroy()アクションが呼び出されたら、引数で受け取った該当するtodoの削除を行なえるようになりました
destroy()アクションは/todo/{id}の形でDELETEリクエストをすることで呼び出すことができるので
Vue側でそのtodoのidを付与しリクエストするよに実装します

#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, index) 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 @click="del(item.id, index)">完了</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')
                .then((res) => {
                    const newItem = res.data.slice(-1)[0];
                    this.items.push(newItem);
                })

                this.text = '';
            },
            async del(id, index) {    //追加
                await axios.delete('/api/todo/' + id);
                this.items.splice(index,1);
            }
        }
    }
</script>

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

完了ボタンにクリックイベントを配置しました
イベントで呼び出されるメソッドの引数にitem.idとして、そのtodoのidを渡しています
後はメソッド側でLaravel側の/todo/{id}としてDELETEリクエストを送信して、store()アクションを呼び出し
削除処理を実装しています
また、this.items.splice(index,1)としてitemsの削除要素を削除してVue側に反映しています

ここまでの実装で実際にtodoの削除ができるようになっています
登録したタスクの完了ボタンをクリックし、そのtodoが消えればOKです
確認してみましょう

これで削除機能の実装は終わりです

#終わりに
今回はtodoの削除機能の実装を行いました
次回はtodoの更新機能の実装を行います
次回が最後のパートになります

次回のパート→Vue CLI × Laravel × VuetifyでCSSいらずの爆速開発でTodoリストを作る part9 ~最終回~