One custom element with different types of props each time

[Meenakshise]

Hi Karol,

We just have only one custom element on the page. That one has to fire the full lifecycle of the custom element every time we change the property. But it is not firing. Is there a way to do this?

We have list of users on a page. Clicking on each user should show the user's details in the vue custom element. The user id is the property of that custom element which needs to be changed on each click.

Could you please help me on this.

[karol-f]

Sure, can you provide repository or better https://codesandbox.io/s/vue ?

Problem is with vue-router changing route and not refreshing components?

Can you provide more details?

[karol-f]

Maybe just create sub-component <user-details> inside your current Vue component and use it's lifecycle hooks?

[Meenakshise]

For now, we are dynamically creating the custom element and removing it on each button click. That's a workaround that we have done

something similar to the below link. But instead of creating a DOM custom element is it possible to change the prop of one custom element which is already on the DOM and changing the prop of that custom element dynamically should refresh the full life cycle of custom element.

https://codesandbox.io/s/1qqnol5ol

[karol-f]

I don't fully get it. Firing full lifecycle of already mounted component when prop changes is IMHO defeating purpose of lifecycle events. If you want to know if prop is updated use Vue lifecycle updated (https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram) or Custom Element lifecycle attributeChangedCallback (https://github.com/karol-f/vue-custom-element#options).

Is there something I don't see here?

[karol-f]

Feel free to provide additional details. Regards!