Pass props instantaneously to a child component in vue 3 by calling a function that creates a modal

Question

I have a problem with a vue component that handles model changes.

In the parent component I have something like this:

<div v-for="role in roles">
    Start date: {{ role.start_date) }}
    <button @click="handleSelectRoleToEdit($event, role)" id="start_date"</button>
</div>

<edit-role
    :role="selectedRole"
    :editField="editField"
    ref="ToEditRole"
    >
</edit-role>

where handleSelectRoleToEdit is

handleSelectRoleToEdit(event, role) {
    this.selectedRole = role;
    this.$refs.ToEditRole.editRoleModal()
    this.editField = event.currentTarget.id
}

This piece of code should take the current item and pass it to the child component <edit-role>. Inside the child component there is

props: [
    "role", 
    "editField"
]

...

editRoleModal() {
    this.modal_edit_role = new Modal(document.getElementById('edit_roleModal'), {})
    this.modal_edit_role.show()
    console.log(this.role)
}

The modal is successfully created and opened, but console.log(this.role) returns Proxy {}.
If I edit the fields (so I call another function), everything is fine, because this.role becomes available.

However I need this.role to be available as soon as the modal is created.

How can I solve this problem?

Any help is greatly appreciated

Answer 1

I don't know if this suits your needs, but instead of using $refs you could set a watcher for the prop role in the child component. This ensures that the function is executed when the data is available.