v-for使用报错:Cannot use v-for on stateful component root element because it renders multiple elements.

最新推荐文章于 2023-05-05 15:45:09 发布

hua_ban_yu

最新推荐文章于 2023-05-05 15:45:09 发布

阅读量2.9w

点赞数 15

分类专栏：前端 vue 文章标签： vue

本文链接：https://blog.csdn.net/hua_ban_yu/article/details/80256611

版权

前端同时被 2 个专栏收录

73 篇文章 6 订阅

订阅专栏

vue

21 篇文章 0 订阅

订阅专栏

在使用v-for的时候遇到了这样的错误：Cannot use v-for on stateful component root element because it renders multiple elements.

错误如图：

错误代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<div id="app" v-for="item in arr">	
			{{item.text}}
		</div>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
				var app = new Vue({
				el:"#app",
				data:{
					arr: [
				      { text: '学习 JavaScript' },
				      { text: '学习 Vue' },
				      { text: '整个牛项目' }
				    ]
				}
				
			})
		</script>
	</body>
</html>

错误提示翻译为中文大致意思：不能在根元素（root element）使用 v-for，因为v-for是个循环体呈现多个元素，v-for在根元素上导致无法渲染。

解决方案：不要把v-for放在根元素即可。

把代码中

<div id="app" v-for="item in arr">	
	{{item.text}}
</div>

修改为

<div id="app" >	
    <div v-for="item in arr">
	{{item.text}}
    </div>
</div>

hua_ban_yu

关注

15
点赞
踩
16

收藏

觉得还不错? 一键收藏
6
评论
v-for使用报错:Cannot use v-for on stateful component root element because it renders multiple elements.

在使用v-for的时候遇到了这样的错误：Cannot use v-for on stateful component root element because it renders multiple elements. 错误如图：错误代码：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;...
复制链接

扫一扫