primefaces / primevue

Next Generation Vue UI Component Library

Home Page:https://primevue.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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