Cannot use v-for on stateful component root element because it renders multiple elements

灰太狼 2022-01-27 00:01 189阅读 0赞

1、错误描述

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95b3VoYWlkb25nLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70][]

2、错误原因

<template>
    	<blog-info v-for="info in infos"
    	           v-bind:key="info.id"
    			   v:bind:title="info.title"></blog-info>
    </template>
    
    <script>
    	export default {
    		name: "Blog",
    		data() {
    			return {
    				infos: [
    					{id:1,title:"张"},
    					{id:2,title:"钱"},
    					{id:3,title:"孙"},
    					{id:4,title:"李"},
    					{id:5,title:"赵"},
    					{id:6,title:"胡"}
    				]
    			}
    		},
    	}
    </script>
    
    <style>
    </style>

v-for指令不能写在根元素节点上，因为会渲染出多个元素

3、解决办法

在组件外层嵌套一个元素

<template>
    	<div id="blogInfo">
    		<blog-info v-for="info in infos"
    				   v-bind:key="info.id"
    				   v:bind:title="info.title"></blog-info>
    	</div>
    </template>
    
    <script>
    	export default {
    		name: "Blog",
    		data() {
    			return {
    				infos: [
    					{id:1,title:"张"},
    					{id:2,title:"钱"},
    					{id:3,title:"孙"},
    					{id:4,title:"李"},
    					{id:5,title:"赵"},
    					{id:6,title:"胡"}
    				]
    			}
    		},
    	}
    </script>
    
    <style>
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95b3VoYWlkb25nLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20220127/a15809489bd24b71ad70b909491afe50.png