Search code examples
vuejs3primevue

Cannot read props in child when using Dialog component


Component can not access props when used in Primevue Dialog component.

I don't know if this is a bug in Primevue or if it's me who's doing something general wrong in Vue3. When structured like this, the prop "user" doesn't get the value from selectedUser.

But if I move outside of the Dialog component everything works as expected.

Any ideas how to fix this?

    <Dialog 
      v-model:visible="showUserModal" 
      modal
      :header="modalUserTitle" 
      :style="{ width: '50vw' }"
      :draggable="false"
      :hide="selectedUser = null"
    >    
      <TabView>
        <TabPanel :header="$translate('user')">
          <TestComponent :user="selectedUser" />
        </TabPanel>
      </TabView>  
    </Dialog>

Solution

  • u have prop :hide on ur dialog, but it's not prop it is emit, u can check it here DIALOG EMITS. What u need to do, is change :hide to @hide and everithing should be fine.