Dynamic Dialog: Incorrect "Events" example
Peanut4287 opened this issue · comments
Describe the bug
In your Events example for the Dynamic Dialog component you explain that
The
emits
object defines callbacks to handle events emitted by the component within the Dialog.
but in the actual example code, you are not wrapping the callback in an emits
object.
So instead of
const showProducts = () => {
dialog.open(ProductListDemo, {
onCancel: (e) => {
console.log(e); // {user: 'primetime'}
}
});
}
it should be
const showProducts = () => {
dialog.open(ProductListDemo, {
emits: {
onCancel: (e) => {
console.log(e); // {user: 'primetime'}
}
}
});
}
Furthermore when the emit is defined, the name is also incorrect. Instead of naming the emit onCancel
, it should be just cancel
, because the name of the callback inside the emits
object is expected to be prefixed with on
followed by the PascalCased emit name. (As you explained yourself)
So instead of
<script setup>
/* ProductListDemo.vue */
const emit = defineEmits(['onCancel', 'onSave'])
function buttonClick() {
emit('onCancel', {user: 'primetime'});
}
</script>
it should be
<script setup>
/* ProductListDemo.vue */
const emit = defineEmits(['cancel', 'save'])
function buttonClick() {
emit('cancel', {user: 'primetime'});
}
</script>
PrimeVue version
3 & 4
@tugcekucukoglu Hey, I just had a brief look at your commit. It seems like you only updated the second part (the emit name), but not the first part (wrapping the callback inside an emits
object).