使用 Vue 模板标签输出 html，但没有嵌套元素

Question

我的首要问题是：在 Vue 中，如何在迭代集合时输出内部 html，但不必将其包装在额外的 div 或 span 中。

具体来说：我正在从 Vue 模板中迭代 js 对象数组。每个对象都有一个输出 html 的“渲染”方法。

这行得通：

template:
`<div id="container">
    <template v-for="element in elements">
        <span v-html="element.render()"></span>
    </template>
</div>
`,

但我想做类似下面的事情，因为我不希望将输出包装在 div 或 span 中。此代码不会产生错误，但也不会产生输出：

template:
    `<div id="container">
        <template v-for="element in elements" v-html="element.render()">
        </template>
    </div>
    `,

在一个完美的世界里，我会做这样的事情，但是小胡子格式不能输出html：

<div id="container">
    <template v-for="(element, index) in elements">
        {{ element.render() }}
    </template>
</div>

想要的输出：

<div id="container">
    (output of element.render())
    (output of element.render())
    (output of element.render())
    etc.
</div>

感谢您的指导，

L

Answer 1

彻底删除<template>标签，在<script>标签中使用渲染功能。类似这样，但此代码未经测试，仅用于演示。

export default {
  ...
  render (h) {
    return h('div', this.elements.map(function (elm) {
      return h(elm.render())
    })
  }
}