如何创建删除数据后显示警告消息的功能

Question

我开始使用 Vue 3。我正在努力创建一个函数来在删除一些数据后显示警告消息。

我的删除函数是这样的：

const deleteProduct = (arg) => {
  router.delete(`/api/product/${arg}`)
  showMsg()
}

我正在尝试创建一个功能来在删除一些通过按钮上的删除功能的数据后显示警报消息，如下所示：

<button class="flex items-center text-danger" v-on:click="deleteProduct(product.id)"
     data-tw-toggle="modal" data-tw-target="#delete-confirmation-modal">
     <Trash2 class="w-4 h-4 mr-1" /> Deletar
</button>

我相信我需要使用类似下面的东西来创建一个函数来在删除后显示警告消息，但是我不知道该怎么做！

function showMsg() {
  if (deleteProdut() === -1) {
    const msgDelete = ref('Produto deletado com sucesso!')

    setTimeout(() => msg.value = "", 3000)
  }
}

Answer 1

应该是这样的：

<template>
    <button class="flex items-center text-danger" @click="deleteProduct(product.id)"">
     <Trash2 class="w-4 h-4 mr-1" /> Delete
    </button>
</template>

<script setup>
function deleteProduct(productId) {
    // Logic to delete the product
    // After the deletion is completed, trigger the alert
    showAlert('Product deleted')
}

function showAlert(message) {
    // Login to show the alert with the message you receive here
}
</script>

显示模态/消息/吐司的逻辑应该在删除操作中进行管理。

button

元素上的那些标签不是必需的。

我们对您的代码的工作方式没有太多了解，但我会根据我在这里可以欣赏的内容尽力而为。