【Vue.js】確認モーダルを表示させた後に削除する方法

概要

現在、画像のような一覧画面から削除ボタンクリックで"そのまま"削除する実装になっています。

これを、「削除ボタン押下→確認モーダル表示→削除するボタン押下→削除　」のようにしたいです。

しかし、現在、実装したものからどのようにして、モーダルを表示させたあとに削除すればよいか検討がつきません。

こちらの方法について、知恵をお貸しいただければと思います。

もとの状態

・削除は正しく挙動する
・モーダル未実装

コード

Index.vue


<template>
  <main>
    <section>
      <div>
        <table>
          <thead>
          <tr>
            <th class="w-15">タイトル</th>
            <th class="w-25">詳細</th>
          </tr>
          </thead>
          <tbody>

          <tr v-for="latest_information in latest_informations">
            <td>{{ latest_information.title }}</td>
            <td>{{ latest_information.detail }}</td>
            <td class="text-nowrap text-right">
              <button class="btn btn-sm btn-icon mx-1" type="button" v-b-tooltip.hover title="編集"
                      @click="$router.push({name: 'AdminLatestInformationEdit', params: {id: latest_information.id}})">
                <i class="fas fa-pen"></i>
              </button>
              <button class="btn btn-sm btn-icon mx-1" type="button" v-b-tooltip.hover title="削除"
                      @click="deleteLatestInformation(latest_information.id)"><i class="fas fa-trash"></i>
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </section>
  </main>
</template>

<script>
export default {


  data() {
    return {
      latest_informations: {},
    }
  },
  methods: {
    setData(query) {
      this.$loading.load(this.$auth.api.get(`admin/latest_informations.json`, {params: query})
          .then(response => {
            this.latest_informations = response.data.latest_informations
          })
          .catch(err => {
            this.$errorHandlers.initial(err);
          }));
    },
    deleteLatestInformation(id) {
      this.$loading.load(this.$auth.api.delete(`admin/latest_informations/${id}.json`)
          .then(response => {
            this.$router.push({name: 'AdminLatestInformationIndex', query: {toast_type: 'deleted'}})
            this.setData(this.$route.query)
          })
          .catch(err => {
            this.$errorHandlers.initial(err);
          }));
    },
  },
  mounted() {
    this.setData(this.$route.query);
  },
}
</script>

現在の状態

・削除機能自体は正しく挙動しない
【ログ】
Started DELETE "/api/v1/admin/latest_informations/undefined.json" for 127.0.0.1 at 2021-08-02 12:12:46 +0000

・モーダルは表示される

コード

Index.vue

<template>
  <main>
    <section>
      <div>
        <table>
          <thead>
          <tr>
            <th class="w-15">タイトル</th>
            <th class="w-25">詳細</th>
          </tr>
          </thead>
          <tbody>

          <tr v-for="latest_information in latest_informations">
            <td>{{ latest_information.title }}</td>
            <td>{{ latest_information.detail }}</td>
            <td class="text-nowrap text-right">
              <button class="btn btn-sm btn-icon mx-1" type="button" v-b-tooltip.hover title="編集"
                      @click="$router.push({name: 'AdminLatestInformationEdit', params: {id: latest_information.id}})">
                <i class="fas fa-pen"></i>
              </button>
              <button class="btn btn-sm btn-icon mx-1" type="button" v-b-tooltip.hover title="削除" 
                      @click="$refs.delete_confirm_modal.open()">
                <i class="fas fa-trash"></i>
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </section>
    <confirm-modal
        ref="delete_confirm_modal"
        :body_text="'この最新情報を削除します。<br>よろしいですか？'"
        :onClickSend="deleteLatestInformation"
        :send_button_text="'削除する'"
    />
  </main>
</template>

<script>
import ConfirmModal from '../../../common/pages/ConfirmModal.vue';
export default {

  components: {
    ConfirmModal
  },


  data() {
    return {
      latest_informations: {},
    }
  },
  methods: {
    setData(query) {
      this.$loading.load(this.$auth.api.get(`admin/latest_informations.json`, {params: query})
          .then(response => {
            this.latest_informations = response.data.latest_informations
          })
          .catch(err => {
            this.$errorHandlers.initial(err);
          }));
    },
    deleteLatestInformation(id) {
      this.$loading.load(this.$auth.api.delete(`admin/latest_informations/${id}.json`)
          .then(response => {
            this.$router.push({name: 'AdminLatestInformationIndex', query: {toast_type: 'deleted'}})
            this.setData(this.$route.query)
          })
          .catch(err => {
            this.$errorHandlers.initial(err);
          }));
    },
  },
  mounted() {
    this.setData(this.$route.query);
  },
}
</script>