Javascript 在组件Vue.js中呈现组件

我正在构建一个可以从JSON生成HTML的系统

下面是JSON

"type": "span",
"content": [
  {
    "type": "span",
    "content": [
      {
        "type": "div",
        "content": []
      }
    ]
  }
]

应生成以下html

<span>
 <span>
  <div></div>
 </span>
</span>

属性数据是仅解析为对象的JSON

当我运行这段代码时，我得到以下错误

Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

有没有人想到更好的解决方案或解决方案

提前谢谢大家,

---

Jeroen

您似乎需要一个递归函数。请参见下面的buildElement方法。它在渲染中使用，并按照您的描述工作：

Vue.component'html-element'{ 名称：“HtmleElement”， 道具：{ 数据：{ 类型：对象， 默认值：{type:'div'} } }, rendercreateElement{ 返回this.buildElementcreateElement，this.data }, 方法：{ buildElementcreateElementFunction，数据{ 返回createElementFunction data.type，data.content | |【】.mapc=>this.buildelementcreateelement函数，c ; } } }; 新Vue{ el:“应用程序”， 数据：{ 元素数据：{ 类型：span， 内容：[{ 类型：span， 内容：[{ 类型:div， 内容：[] }] }] } } } span{显示：内联块；边框：1px纯红色；宽度：50px} 如果您将HtmleElement更改为新的HtmleElement，您应该引用HtmleElement，也就是数组don；没有类型和内容属性

Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.