点击Bootstrap模态框Delete按钮后，axios删数据无法刷新页面及关模态框问题

问题原因 #

1. 表单默认提交行为干扰：Delete按钮嵌套在<form>标签内，点击时会触发表单默认提交动作，导致axios请求被中断，then回调里的location.reload()根本没机会执行，模态框自然也无法关闭。
2. 参数传递错误：模板里调用deleteData(book)传的是整个book对象，但函数定义是deleteData(id)，导致actionUrl拼接错误，请求失败后回调不执行。
3. 缺少手动关闭模态框逻辑：即使请求成功，也没有主动关闭模态框的代码，依赖刷新关闭不可靠。

解决方案 #

1. 修正参数传递与请求逻辑

把deleteData的参数改为接收book对象，确保接口地址正确；同时在axios请求的then回调里先关闭模态框，再刷新页面。

修改后的deleteData函数：

deleteData(book) {
  if (confirm("Anda yakin?!")) {
    const actionUrl = '{{ url('books') }}' + '/' + book.id;
    axios.post(actionUrl, {
      _method: 'DELETE'
    }).then(response => {
      // 手动关闭Bootstrap模态框
      const modal = bootstrap.Modal.getInstance(document.getElementById('modal-default'));
      modal.hide();
      // 刷新页面
      location.reload();
    }).catch(error => {
      // 处理请求失败的情况
      console.error('删除失败:', error);
    });
  }
}

2. 阻止表单默认提交行为

给Delete按钮添加@click.prevent指令，避免触发表单提交：

<button type="button" class="btn btn-danger" v-if="editStatus"
        @click.prevent="deleteData(book)">Delete</button>

3. 可选：优化页面更新方式（无需刷新）

如果不想刷新页面，可以直接从前端列表中移除删除的图书项，提升用户体验：

// 假设你的图书列表数据存在this.books数组中
then(response => {
  const modal = bootstrap.Modal.getInstance(document.getElementById('modal-default'));
  modal.hide();
  // 从列表中移除对应项
  this.books = this.books.filter(item => item.id !== book.id);
})

内容的提问来源于stack exchange，提问作者Heri Prastio