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

只需将全部内容放在单个根元素中即可。

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

Answer 2

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')]

Vue.js RangeError：无效的字符串长度

2 个答案: