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>
复制代码

 

posted @   伊凡晴天  阅读(686)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛