es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cargar componente vue en cadena para usarlo con confirmación de buefy.

06 Aug, 2023 Programación

¿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?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    import OArchiveChannel from './OArchiveChannel.vue';

// ...

archiveChannelPrompt () {
  const archiveChannel = Vue.extend(OArchiveChannel)
  const vm = new archiveChannel({
    propsData: {
      channel: this.channel,
    }
  })
  vm.$mount()

  this.$buefy.dialog.confirm({
    title: 'Archivar canal',
    message: vm.$el.outerHTML,
    confirmText: 'Archivar',
    onConfirm: () => this.$buefy.toast.open('¡Archivado!')
  })
}

    En esta implementación, utilizamos el método Vue.extend para crear un nuevo constructor de componentes a partir del componente OArchiveChannel. Luego creamos una nueva instancia de este componente y lo montamos en el DOM utilizando vm.$mount(). Por último, pasamos el outerHTML del elemento raíz del componente montado al campo message del diálogo confirm. Esto nos permite pasar un componente de Vue a buefy confirm como una cadena.

    Ten en cuenta que utilizamos propsData en lugar de props al crear la instancia del componente, y utilizamos vm.$el.outerHTML en lugar de archiveChannel.outerHTML. Además, no necesitamos importar i18n y router ya que no se utilizan en esta implementación.

Comments are closed.