#前回のパート
前回はtodoの一覧表示機能を作成しました
今回はtodoの完了時に押す削除機能を実装していきます
前回のパートはこちらVue CLI × Laravel × VuetifyでCSSいらずの爆速開発でTodoリストを作る part7
#Laravel側の実装
todoの削除を行うのはTodoController.php
のdestroy()
アクションを利用します
destroy()
アクションの中身の実装をやっていきます
TodoController.php
を開きdestroy()
アクションに下記を追加してください
public function destroy($id)
{
Todo::find($id)->delete();
return response('', 200);
}
これでdestroy()
アクションが呼び出されたら、引数で受け取った該当するtodoの削除を行なえるようになりました
destroy()
アクションは/todo/{id}
の形でDELETEリクエストをすることで呼び出すことができるので
Vue側でそのtodoのidを付与しリクエストするよに実装します
#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 ~最終回~