Генерация HTML с тегом из предоставленных данных JSON / массив

Question

Я хочу сгенерировать HTML с тегом из json/array, который может содержать любое количество дочерних элементов в дочернем элементе и т. Д., И я хочу создать сложную вложенную разметку HTML на основе предоставленного массива / json. Я уже изучил Как создать динамический тег на основе реквизита с помощью Vue 2

но я не понимаю, как создать компонент / систему, которая будет копаться в дочернем свойстве внутри дочернего свойства для генерации разметки HTML.

Пожалуйста, ознакомьтесь с примером кода, который я создал: Образец Codepen

Answer 1

Vue.js Функция рендеринга должна соответствовать вашим требованиям. Используя его, вы можете рекурсивно перемещаться по массиву, создавая все элементы DOM. Пожалуйста, посмотрите демо:

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#demo',
  data () {
    return {
      items: [
        {
          id: 6568,
          tag: 'h1',
          mesg: '1',
          child: [
            {
              id: 6569,
              tag: 'h2',
              mesg: 11,
              child: [
                {
                  id: 6570,
                  tag: 'h4',
                  mesg: '111',
                  child: []
                }
              ]
            },
            {
              id: 99777,
              tag: 'p',
              mesg: 1123
            }
          ]
        },
        {
          id: 56565,
          tag: 'p',
          mesg: '6568985',
          child: []
        }
      ]
    }
  },
  render: function (createElement) {
    const renderNode = item => {
      const children = [item.mesg];
      if (item.child && Array.isArray(item.child)) {
        children.push(...item.child.map(renderNode))
      }
      return createElement(item.tag, children)
    }
    return createElement('div', this.items.map(renderNode));
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo"></div>