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

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

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

Load vue component into string to use with buefy confirm

javascript

vue.js

buefy