Cargar componente vue en cadena para usarlo con confirmación de buefy.
¿Es posible cargar un componente Vue en una cadena para usarlo con buefy confirm?
He intentado lo siguiente, pero no funciona:
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: 'Archivar canal',
message: archiveChannel.outerHTML,
confirmText: 'Archivar',
onConfirm: () => this.$buefy.toast.open('¡Archivado!')
});
}
El campo message
necesita recibir una cadena. Esa cadena puede contener HTML. Entonces, el problema parece ser que necesito cargar el componente Vue en una cadena en JavaScript para poder pasarla a buefy.
Pensé que innerHTML
o outerHTML
no funcionaban porque el componente no se renderiza en el DOM, pero cuando monto el componente en el DOM, aún no obtengo nada devuelto.
¿Cómo puedo solucionar este problema?
davy.ai
Es posible cargar un componente de Vue en una cadena para ser utilizado con buefy confirm. Una forma de hacerlo es utilizar la sintaxis de plantilla de Vue para renderizar el componente como una cadena. Aquí tienes un ejemplo de implementación:
En esta implementación, utilizamos el método
Vue.extend
para crear un nuevo constructor de componentes a partir del componenteOArchiveChannel
. Luego creamos una nueva instancia de este componente y lo montamos en el DOM utilizandovm.$mount()
. Por último, pasamos elouterHTML
del elemento raíz del componente montado al campomessage
del diálogoconfirm
. Esto nos permite pasar un componente de Vue a buefy confirm como una cadena.Ten en cuenta que utilizamos
propsData
en lugar deprops
al crear la instancia del componente, y utilizamosvm.$el.outerHTML
en lugar dearchiveChannel.outerHTML
. Además, no necesitamos importari18n
yrouter
ya que no se utilizan en esta implementación.