Saki's 研究记录

Vue: The template root requires exactly one element 的解决办法

字数统计: 181阅读时长: 1 min
2024/04/07

问题

工程里有这么一段代码:

1
2
3
4
<template>
<img id="logo" alt="Wails logo" src="./assets/images/logo-universal.png"/>
<HelloWorld/>
</template>

IDE 提示错误信息: The template root requires exactly one element.

原因

这是因为 vue的模版中只能有一个根节点,所以在 <template>中插入第二个元素就会报错

解决方案

<template>中的元素用一个大的 <div>包起来,这样就可以在其中添加多个元素了,可以参考以下示例:

1
2
3
4
5
6
<template>
<div id="vue">
<img id="logo" alt="Wails logo" src="./assets/images/logo-universal.png"/>
<HelloWorld/>
</div>
</template>

以上。

CATALOG
  1. 1. 问题
  2. 2. 原因
  3. 3. 解决方案