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

本文轉載自查看原文 2021-01-17 09:09 402 v-for/ Vue

解決方案

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue小demo實現問題解決Cannot use v-for on stateful component root element because it renders multiple elem ents - Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 解決方案 Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. VUE之命令行報錯：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead 解決辦法 vue v-for循環 vue v-for object vue 的v-for 循環 vue v-for詳解 Vue中的v-for Vue v-if and v-for