Функция рендеринга частично работает, как я могу это исправить?

Question

Моя функция рендеринга не работает, как ожидалось, я попробовал несколько вещей, но я не могу понять, почему она не работает. Кто-нибудь может мне помочь ? Как вы можете видеть ниже, он создает элемент UL, но не элемент LI, то же самое относится к обоим условиям.

render: function (createElement) {
    var list;
    if (this.items.length > 0) {
     list = createElement(
        'ul',
        {
          class: {
            'v7-modal-list': true
          }
        },
        this.items.map(function (item) {
          return createElement(
            'li',
            createElement(
              'label',
              [
              createElement(
                'span',
                item.name
              ),
              createElement(
                'input',
                {
                  attrs: {
                    type: "checkbox"
                  }
                }
              )
              ]
            )
          )
        })
      )
    } else {
      list = createElement(
        'ul',
        {
          class: {
            'v7-modal-list': true
          }
        },
        createElement(
          'li',
          {
            class: {
                "v7-modal-empty-list": true
            }
          },
          "Empty list"
        )
      )
    }

    return createElement(
      'div', [
      createElement(
        'h4',
        {
          class: {
            "v7-modal-title-4": true
          }
        },
        this.name
      ),
      list
    ]
    )
  }

Вывод:

<div><h4 class="v7-modal-title-4">Log::</h4><ul class="v7-modal-list"></ul></div>

Answer 1

createElement аргументы: (имя узла, атрибуты, элементы), как описано https://vuejs.org/v2/guide/render-function.html#createElement -Arguments .

Элементы должны быть массивом (или строкой, если текст узел используется). Это может быть массив в массиве, поскольку он будет сплющен. Поэтому этот код должен работать:

      list = createElement(
        'ul',
        {
          class: {
            'v7-modal-list': true
          }
        },
        [createElement(
          'li',
          {
            class: "v7-modal-empty-list"
          },
          "Empty list"
        )]
      )

Закомментированный код верен.