这个问题的原因是OnRemove事件会在P-chip删除时自动触发,但是P-comfirmpopup不能正确处理这个事件。要解决这个问题,我们需要在OnRemove属性中添加一个自定义函数,来手动触发P-comfirmpopup。
示例代码如下:
<p-chips v-model="selected" :placeholder="'Select some options'"
@onRemove="confirmRemove">
<template #default="{ item }">
<div class="chip">{{ item }}</div>
</template>
</p-chips>
<p-confirmDialog :header="'Remove Confirm'" :message="'Are you sure you want to remove this item?'"
:icon="icon" :accept-label="'Yes'" :reject-label="'No'"
@accept="removeItem" #removeDialog></p-confirmDialog>
data() {
return {
items: ['Apple', 'Banana', 'Cherry'],
selected: [],
icon: 'pi pi-exclamation-triangle'
};
},
methods: {
confirmRemove(event) {
this.$refs.removeDialog.show();
this.selected = event.value;
},
removeItem() {
this.selected = this.selected.filter(item => item !== this.$refs.removeDialog.selected);
}
}
在该代码中,我们通过在OnRemove事件中调用confirmRemove函数来手动触发P-comfirmpopup。confirmRemove函数会打开P-confirmDialog并将要删除的选项存储在selected属性中。当用户点击“确认”时,我们在removeItem函数中将选中的项目从选定列表中删除。
这样,就可以正确处理P-chip中的删除事件,并使用P-comfirmpopup来显示删除确认对话框。