Vue3中如何实现删除数据后显示提示消息？

先修正你代码里的核心问题 #

1. router.delete 是错误用法：router 是路由跳转工具，发送HTTP请求得用axios这类库，比如axios.delete。
2. showMsg 逻辑完全颠倒：应该是删除请求成功后触发提示，不是在提示函数里调用删除；还有拼写错误deleteProdut，变量名也不匹配（msgDelete和msg.value）。
3. 提示消息是局部变量：模板根本访问不到，得定义成组件级的响应式变量。

完整实现代码 #

1. 组件脚本部分

import { ref } from 'vue'
import axios from 'axios' // 没装的话先执行：npm install axios

// 定义响应式提示消息，模板直接用
const msgDelete = ref('')

const deleteProduct = async (productId) => {
  try {
    // 等待删除请求完成
    await axios.delete(`/api/product/${productId}`)
    // 请求成功后设置提示
    msgDelete.value = 'Produto deletado com sucesso!'
    // 3秒后清空提示
    setTimeout(() => msgDelete.value = '', 3000)
    // 可选：如果需要刷新产品列表，这里调用获取列表的函数
    // fetchProducts()
  } catch (err) {
    // 处理删除失败的情况
    msgDelete.value = 'Falha ao deletar o produto!'
    setTimeout(() => msgDelete.value = '', 3000)
    console.error('删除出错:', err)
  }
}

2. 模板部分

注意：原按钮直接绑定删除函数+触发模态框，会导致点击就直接删除，不符合“确认后删除”的逻辑，调整如下：

<!-- 触发确认模态框的按钮 -->
<button class="flex items-center text-danger" data-tw-toggle="modal" data-tw-target="#delete-confirmation-modal">
  <Trash2 class="w-4 h-4 mr-1" /> Deletar
</button>

<!-- 删除确认模态框 -->
<div id="delete-confirmation-modal" class="modal">
  <div class="modal-content">
    <p>Tem certeza que deseja deletar este produto?</p>
    <div class="modal-actions">
      <button data-tw-dismiss="modal">Cancelar</button>
      <!-- 确认按钮才调用删除函数，同时关闭模态框 -->
      <button class="text-danger" @click="deleteProduct(product.id)" data-tw-dismiss="modal">
        Confirmar Deleção
      </button>
    </div>
  </div>
</div>

<!-- 提示消息显示区域 -->
<div v-if="msgDelete" class="alert alert-success">
  {{ msgDelete }}
</div>

关键说明 #

• 用async/await等待请求完成，确保只有请求成功/失败后才显示对应提示。
• 提示消息是组件级响应式变量，模板通过v-if控制显示，直接渲染内容。
• 修正了模态框逻辑：先让用户确认，再执行删除，避免误操作。
• 增加了错误处理，删除失败时也能给出反馈。

内容的提问来源于stack exchange，提问作者Victor Martins