Yes, I’m using dynamic components in some places, but I’ve found they do need quite a bit of boilerplate to avoid premature loading, and then they need careful handling to get them to open with the data (e.g. I’m using them for seldom-used dialogs). I end up with lots of code like this:
<component :is="editor"
ref="edit"
title="Edit Item"
:item-text="item.text"
@edit="handleEdit"
/>
components: {
EditFeedback: () => import('components/editors/EditorDialog')
},
methods: {
handleOpenEditor (what) {
this.item.text= what.text
if (this.editor === null) {
this.editor = 'EditFeedback'
}
setTimeout(() => { this.$nextTick(this.$refs.edit.show) }, 0)
}
}
Without using both setTimeout()
and $nextTick()
, I find that either this.$refs.edit
is undefined, or the props haven’t rippled down into the component.
I’ve decided to refactor things into a parent component which only contains the multiple child components that used to contain menus, and instead have all the children emit an event which allows the parent to open an (already templated) menu based on the id of the child passed up in the event. I think this solves the problem without too much extra code like above.