vue.js 如何创建删除数据后显示预警消息的函数

4xrmg8kj 于 2023-02-24 发布在 Vue.js

关注(0)|答案(1)|浏览(112)

我正在开始使用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)
  }
}

vue.js

来源：https://stackoverflow.com/questions/75539138/how-to-create-a-function-to-display-an-alert-message-after-deleting-data

1条答案

按热度按时间

xmjla07d1#

应该是这样的：

<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>

显示模态/消息/toast的逻辑应该在delete操作中管理。button元素上的那些标记是不必要的。
我们没有太多关于您的代码如何工作的上下文，但是我已经尽了最大的努力来理解这里的内容。

赞(0）回复(0）举报 2023-02-24

我来回答

vue.js 如何创建删除数据后显示预警消息的函数

1条答案

相关问题

热门标签

最新问答