Vue Error: The template root requires exactly one element.

最新推荐文章于 2024-07-25 08:49:08 发布
最新推荐文章于 2024-07-25 08:49:08 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： vue前端技术 Vue.js vue前端零碎

作者：埋桑
链接：https://www.jianshu.com/p/6c6cc02a9001

前言近段时间，我正在使用Vue + Element进行新的项目开发。在刚使用完NavMenu组件，准备添加下一项组件时，发生了报错。报错内容Vue Error: The template root requires exactly one element. 详见下图：

在这里插入图片描述
VSCode 中报错信息

在这里插入图片描述

Node中报错信息
报错原因Vue只允许模板里存在一个根节点。

解决方案在 <template> 中添加一个 <div>标签，之后所有的组件全部加在 <div>即可解决。
春风又一季
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3+eslint遇到 The template root requires exactly one element.eslintvue/no-multiple-template-root解决方案
悲莫悲兮生别离
05-07 2110
vue3+eslint遇到 The template root requires exactly one element.eslintvue/no-multiple-template-root 解决方案 找到eslint配置文件，我这里是 .eslintrc.js 把 extends 中的 ‘plugin:vue/essential’，改成’plugin:vue/vue3-essential’ 搞定 网上文章说是vetur的问题，但我这里不是 贴一下我的eslint配置 module.exports
Vue报错 The template root requires exactly one element
TOP的博客
01-07 2103
Vue报错 The template root requires exactly one element. Vue2解决 因为vue的模版中只能有一个根节点，由于不支持多根节点组件，所以在<template>中插入第二个元素就会报错，将<template>中的元素用一个大的<div>包起来，这样就可以在其中添加多个元素了 Vue3解决 在 3.x 中，组件可以包含多个根节点！但是为什么还会报错呢 是因为插件vetur设置了校验规则，改一下配置规则就不会显现错误了
【前端】vue 报错:The template root requires exactly one element
最新发布
程序员-张师傅
07-25 1567
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。Vue 要求每个组件的模板必须有一个根元素来包裹所有的子元素。如果你的模板看起来像这样，就会出现这个错误：
Vue：The template root requires exactly one element.的解决办法
热门推荐
灿灿大王搭建的黄金屋
05-28 9万+
这是因为vue的模版中只有能一个根节点，所以在<template>中插入第二个元素就会报错 解决方案： 将<template>中的元素用一个大的<div>包起来，这样就可以在其中添加多个元素了，可以参考以下示例： <template> <div id="vue"> Hello Vue.js!{{message}} ...
The template root requires exactly one element vue/no-multiple-template-root
weixin_64652648的博客
09-06 1244
当你在使用element的过程中出现了这个错误就代表<template></template>内出现了一个或几个<div></div>,且没有一个div将template内的代码全部包括起来，这个时候只需要加上一个div就可以解决这个问题。
The template root requires exactly one element（总算是解决）
华夏乐园
01-04 6646
为了在vscode中编写的代码看起来规范，肯定要使用全局的ESLint配置 一、在VS Code中添加ESLint插件 二、在node全局路径中生成 eslint 的配置文件 .eslintrc.js 1、路径一般在C:\Users\大圣\AppData\Roaming\npm\node_modules，执行cmd 2、npm init 创建 package.json 文件 3、执行 eslint --init 创建配置文件 4、按照命令提示一直脱干净，全局文件就现身完成 三、在vscode.
The template root requires exactly one element. (vue/valid-template-root)
04-03
This error message is related to Vue.js templates and indicates that the root element of the template should contain only one element. In other words, the template should have a single parent element....
The template root requires exactly one element.(vue/no-multiple-template-root)
08-29
In Vue, each component template should have a single root element. To resolve this issue, you can wrap all the elements inside a parent element. For example, if you have the following code: ``` ...
[eslint-plugin-vue] [vue/valid-template-root] The template root requires exactly one element.
07-29
It indicates that in a Vue template, there should be exactly one root element. In other words, your template should have a single root element that encapsulates all other elements within it. To fix...
The template root requires exactly one element vue/valid-template-root
NancyFyn的博客
05-08 296
新写的页面还没有开始写内容就开始报这个问题，问题描述：写了路由，但是页面只是写了个 < template > 标签 这时候保存就会报错；原因是：没有写 跟节点 ，即 没有有效的根节点。 代码如下： 解决方法： !](https://img-blog.csdnimg.cn/20210508173914310.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmN.
the template root requires exactly one element vue/valid-template-root
璨星烁的博客
08-08 1156
解答： Vue-cli项目中vue文件的标签只能有一个根元素。所以template中的内容可以用一个div给包裹起来即可
【VUE-多个根节点问题】 [vue/valid-template-root] The template root requires exactly one element
Douglas的博客
11-02 1121
Vue文件多个根节点报错问题
[vue/valid-template-root]The template root requires exactly one element.错误。
weixin_42464106的博客
07-05 6213
出现如上图一样的错误提示，是因为Vue模版只能有一个根节点，所以需要改动一下即可。在 中添加一个 标签，之后所有的组件全部加在 即可解决。
The template root requires exactly one element.(vue/valid-template-root)错误处理
圣人男的博客
03-16 8074
在使用自定义组件的时候 出现的错误 <template> <el-row :gutter="20" class="el-row"> </el-row> <EditApp ></EditApp> </template> 因为Vue模版只能有一个根节点，所以需要改动一下即可 <templat...
The template root requires exactly one element.
Within的博客
05-15 349
error:[vue/valid-template-root] The template root requires exactly one element. 原因： 因为vue的模版中只有能一个根节点，所以在<template>中插入第二个元素就会报错 解决方案： 将<template>中的元素先用一个<div>包起来。 <template> <div> <p>123</p> &lt.
vue--The template root requires exactly one element.的解决办法
weixin_56181202的博客
03-14 1914
vue--The template root requires exactly one element.的解决办法。报错原因： 在vue中会出现以上问题，这是因为vue的模版中只有能一个根节点，所以在中插入第二个元素就会报错。
踩坑:The template root requires exactly one element.
qq_42388853的博客
12-15 254
这是因为vue的模版中只有能一个根节点，所以在中插入第二个元素就会报错 解决方案： 将中的元素用一个大的包起来，这样就可以在其中添加多个元素了，可以参考以下示例： <template> <div id="vue"> Hello Vue.js!{{message}} <span>{{message1}}</span> <span v-if="seen">你看到我啦！</span> <div i
The template root requires exactly one element.eslint-plugin-vue
02-21
"The template root requires exactly one element"是一个错误信息，它通常出现在使用eslint-plugin-vue进行Vue.js代码静态检查时。这个错误的原因是Vue.js模板中只能有一个根元素，而你的模板中可能有多个根元素...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值