Vuejs RangeError: неверная длина строки

Question

Я новичок в VueJS, когда я пытаюсь скомпилировать этот код, он работает нормально:

<template>
  <div id="users-table">
    <ServerTable url="users" :columns="columns" :options="options"></ServerTable>
  </div>
</template>

Однако, когда я добавляю другой тег (любой тег), подобный этому:

<template>
     <h1>Header</h1>
  <div id="users-table">
    <ServerTable url="users" :columns="columns" :options="options"></ServerTable>
  </div>
</template>

Я получаю ошибку

Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
RangeError: Invalid string length
    at repeat$1 

Что я делаю не так?

Answer 1

VueJS шаблоны допускают только один корневой элемент в теге шаблона.

Следовательно, вы можете обернуть его в <div>, например:

<template>
  <div class="wrapper">
    <h1>Header</h1>
    <div id="users-table">
      <ServerTable url="users" :columns="columns" :options="options"></ServerTable>
    </div>
  </div>
</template>

Если вам нужно пропустить упаковочные теги, вы можете выбрать одно из существующих решений:

• Библиотека Vue-Framgent - https://github.com/y-nk/vue-fragment
• Функциональные компоненты - render: h => [h('p', 'one'), h('p', 'two')]

Answer 2

Просто поместите весь контент в один корневой элемент.

<template>
  <div>
    <h1>Header</h1>
    <div id="users-table">
      <ServerTable url="users" :columns="columns" :options="options"></ServerTable>
    </div>
  </div>
</template>