¿Es posible cargar un componente vue en una cadena para usar con buefy confirm?
He intentado lo siguiente que 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: 'Archive Channel', message: archiveChannel.outerHTML, confirmText: 'Archive', onConfirm: () => this.$buefy.toast.open('Archived!') }); }El mensaje de campo 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 pasarlo a buefy.
Pensé que el HTML interno o el HTML externo no funcionaban porque el componente no se procesa en el DOM, pero cuando monto el componente en el DOM, todavía no obtengo nada.
¿Cómo puedo evitar este problema?
Lo averigué. Se necesitaba un pequeño ajuste. Use $mount pero no especifique un elemento para montar, luego dentro de $el puede encontrar el componente que ha cargado con todas las propiedades habituales disponibles, como 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!') }); }