Saki's 研究记录

Vue 报错: The template root requires exactly one element

error vue
字数统计: 179阅读时长: 1 min
2022/08/26

问题

工程里有这么一段代码：

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>

原文作者：Saki Shum

原文链接：https://sakishum.com/2022/08/26/Vue-%E6%8A%A5%E9%94%99-The-template-root-requires-exactly-one-element/

发表日期：八月 26日 2022, 2:05:29 下午

更新日期：八月 26日 2022, 2:05:58 下午

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 问题
  2. 2. 原因
  3. 3. 解决方案
Total : 98
2024
2023
2022
2021
python docker Elasticsearch error nginx minio pip docker-compose ETCD openresty golang go generate yum Mac appine git Linux etcd vue MySQL hexo chart go modules vue.js SEO google samba mount fstab cifs huginn webpushr elasticsearch plantuml jupyter notebook centos ssl linux smtp mysql musl macos ubuntu wish private pandas talib alpine sqlite3 df code inspirational article redis embed crosstool-ng nodejs postgres mac brew trash command brave m1 c++ chipmunk tool pyroscope tools ansible zinc yarn license terminal k3s multipass rust gitlab minikube helm dockerfile github temporal demo mac m1 watchdog redisson java openjdk wails slice append trap vite vue3 ts slow netstat socket tcpdump Kibana leetcode blind-75 algorithm tips naive-ui scss search npm qa goroutine qr-code go grpc app tiny clicker sakishum App package typescript
ETCD MySQL Hexo Docker Error Huginn Samba Golang Apple 量化 postgres nodejs