Laravel を利用した CRUD の SPA 作成 6 削除編

長いものでこの長編もついに完結をむかえました。

ということで、削除を実装して完了しましょう。

フロントエンド

トップ画面に削除ボタンを実装します。

<template>
  <div>
    <div v-if="message" class="alert alert-success">
      {{ message }}
    </div>
    <router-link to="/add" tag="button" class="btn btn-success" style="margin-bottom:10px">新規作成</router-link>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">検索</span>
      </div>
      <input type="text" class="form-control" v-on:blur="fetchItems" v-model="searchText">
    </div>
    <table class="table table-bordered table-dark">
      <thead>
        <tr>
          <th scope="col">Id</th>
          <th scope="col">名前</th>
          <th scope="col">編集</th>
          <th scope="col">削除</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items">
          <th scope="row">{{ item.id }}</th>
          <td>{{ item.item_name }}</td>
          <td style="width:10%"><router-link :to="{ name:'edit', params: { itmeId:item.id }}" tag="button" class="btn btn-primary" style="margin-bottom:10px">編集</router-link></td>
          <td style="width:10%"><button type="button" class="btn btn-danger" v-on:click="deleteItem(item)">削除</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
    export default {
        created() {
            this.fetchItems()
            this.message = this.$route.query.message
        },
        data() {
            return {
                items: [],
                searchText: '',
                message: null
            }
        },
        methods: {
            fetchItems() {
                axios.get('/api/items', {params: {item_name:this.searchText}}).then((res)=>{
                    this.items = res.data
                })
            },
            deleteItem(item) {
              axios.post('/api/items/destroy/'+item.id).then((res)=>{
                  this.items.splice(this.items.indexOf(item), 1);
              })
            }
        }
    }
</script>

ボタンをクリックすると「deleteItem」関数が呼ばれて Rest でデータを削除します。

バックエンドの実装

Laravel で削除ロジックを実装します。

    public function destroy($id)
    {
        \App\Item::destroy($id);
    }

Route::post('items/destroy/{id}', 'ItemsController@destroy');

以上で完成です。

動作確認

削除ボタンを押してみます。

削除できました。

未分類

Posted by admin