Vue v-for提示Cannot use v-for on stateful component root element because it renders multiple elements.

解决方案

v-for应该写在#app定义的内部,而不是平级

错误的代码,v-for 写在了#app平级

 1 body>
 2 
 3     <section id="app" v-for='item in monster'>
 4         <table>
 5             <tr>
 6                 <th>名称</th>
 7             </tr>
 8             <tr>
 9                 <td>{{item}}</td>
10                 <td>{{item.name}}</td>
11             </tr>
12            
13         </table>
14     </section>
15 
16     <script>
17         var app = new Vue({
18             el: '#app',
19             data: {
20                 monster: [
21                     { name: '独眼蝙蝠', lv: 1, hp: 100 },
22                     { name: '彭哚菇', lv: 3, hp: 300 }
23                 ]
24             },
25             methods: {},
26         })
27     </script>
28 </body>

正确的代码,写在app定义的内部

 1 <body>
 2 
 3     <section id="app">
 4         <table v-for='item in monster'>
 5             <tr>
 6                 <th>名称</th>
 7             </tr>
 8             <tr>
 9                 <td>{{item}}</td>
10                 <td>{{item.name}}</td>
11             </tr>
12            
13         </table>
14     </section>
15 
16     <script>
17         var app = new Vue({
18             el: '#app',
19             data: {
20                 monster: [
21                     { name: '独眼蝙蝠', lv: 1, hp: 100 },
22                     { name: '彭哚菇', lv: 3, hp: 300 }
23                 ]
24             },
25             methods: {},
26         })
27     </script>
28 </body>

时间若流水,恍惚间逝去