Is it possible to load a vue component into a string to be used with buefy confirm?
I've tried the following which is not working:
archiveChannelPrompt () {
const archiveChannel = document.createElement('template');
new Vue({
i18n,
router,
render: (h) => h(OArchiveChannel, {
props: {
channel: this.channel,
}
}),
}).$mount(archiveChannel);
this.$buefy.dialog.confirm({
title: 'Archive Channel',
message: archiveChannel.outerHTML,
confirmText: 'Archive',
onConfirm: () => this.$buefy.toast.open('Archived!')
});
}
The field message needs to receive a string. That string can contain html. So the problem it seems is I need to load the vue component into a string in javascript so I can pass it along to buefy.
I thought the innerHTML or outerHTML isn't working because the component is not rendered in the DOM, but when I mount the component into the DOM I still get nothing returned.
How can I get around this problem?
Figured it out. A little tweak was needed. Use $mount but don't specify an element to mount to, then within $el you can find the component that you have loaded with all the usual properties available such as innerHTML.
archiveChannelPrompt () {
const archive = new Vue({
i18n,
router,
render: (h) => h(OArchiveChannel, {
props: {
channel: this.channel,
}
}),
}).$mount();
this.$buefy.dialog.confirm({
title: 'Archive Channel',
message: archive.$el?.innerHTML,
confirmText: 'Archive',
onConfirm: () => this.$buefy.toast.open('Archived!')
});
}