将 vue 组件加载到字符串中以与 buefy 确认一起使用

Question

是否可以将 vue 组件加载到与 buefy confirm 一起使用的字符串中？

我尝试了以下不起作用的方法：

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!')
  });
}

字段消息需要接收一个字符串。 该字符串可以包含 html。 所以问题似乎是我需要将 vue 组件加载到 javascript 中的字符串中，以便我可以将它传递给 buefy。

我认为 innerHTML 或 outerHTML 不起作用，因为组件未在 DOM 中呈现，但是当我将组件安装到 DOM 中时，我仍然没有返回任何内容。

我怎样才能解决这个问题？

Answer 1

弄清楚了。 需要稍作调整。 使用 $mount 但不指定要挂载到的元素，然后在 $el 中您可以找到已加载的组件，其中包含所有可用的常用属性，例如 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!')
  });
}