为了解决这个问题,需要手动处理p-comfirmpopup,以确保在用户点击删除时能够正确地弹出确认对话框。以下是一个解决方法的示例:
在P-chip组件中添加一个方法,当点击删除按钮时调用该方法。此方法将调用p-comfirmpopup方法来显示确认对话框。如果用户点击“确认”按钮,则P-chip组件将从列表中移除。
<template>
<p-chip @click="showConfirmDialog" @remove="removeItem">
{{ name }}
</p-chip>
</template>
<script>
export default {
props: {
name: String
},
methods: {
showConfirmDialog() {
this.$refs.confirmPopup.show();
},
removeItem() {
// Remove the item here
}
}
}
</script>
<p-comfirmpopup
ref="confirmPopup"
v-model="confirmPopupVisible"
title="Delete Item"
message="Are you sure you want to delete this item?"
accept-label="Yes"
accept-icon="pi pi-check"
reject-label="No"
reject-icon="pi pi-times"
@accept="removeItem">
</p-comfirmpopup>
在这个示例中,当用户点击p-chip的删除图标时,将触发removeItem()方法,该方法将在p-comfirmpopup中显示确认对话框并处理用户的确认结果。如果用户点击“Yes”按钮,则removeItem()方法将删除对应的项。
请注意,这只是一个示例。具体实现可能会因您的项目需求而有所不同。