Question

我正在使用方便的Bootbox.js为我提供简单的Bootstrap模式对话框。它的使用方式是这样的：

bootbox.dialog({message: "<div>HTML goes here</div>", onEscape: true, animate: false});

即，您实例化将HTML作为“message”属性传递的对话框。我想为HTML使用Vue模板，但这有一点问题。使用Vue，您可以将实例挂载到DOM元素 - 但是在调用bootbox.dialog之前DOM元素不存在。我现在正在做的是以下内容，它起作用但是很糟糕：

bootbox.dialog({message: "Loading...", onEscape: true, animate: false});
vm.$mount('.bootbox-body');

也就是说，我正在使用一些HTML实例化bootbox.dialog，一旦安装了Vue实例，它就立即被替换。理想情况下，我想要做的是在调用bootbox.dialog之前将Vue模板呈现为Javascript字符串，然后我可以将字符串作为message属性传递。但是，我没有看到这样做的方法。我知道我可以使用vm。$ mount将实例挂载到off-document元素，但是我可能需要将它插入到DOM中才能获得HTML。

当然，我可能会以错误的方式看待这个问题，可能会有一个更简单的解决方案，我没有想到，在这种情况下我会热衷于听到它！

Answer 1

如您所知，您可以渲染到非文档div。您还可以获取Vue元素的innerHTML（this.$el），因此只需在bootbox.dialog内拨打mounted()。

new Vue({
  el: document.createElement('div'),
  template: '#foo',
  mounted() {
    // This is where you would call
    // bootbox.dialog({message: this.$el.innerHTML, onEscape: true, animate: false});
    console.log(this.$el.innerHTML);
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<template id="foo">
<div>
  <div class="inverse">Hi there <button>foo</button></div>
</div>
</template>

将Vue模板渲染为Javascript变量？

1 个答案: