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项目的时候，向template模板添加元素的时候报错

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.

刚开始我是这样写的

 1 <template>
 2     <div class="reconmmend-title">热销推荐</div>
 3     <ul>
 4         <li class="item">
 5             <div class="item-img-wrapper">
 6                 <img class="item-img" src="" alt="">
 7             </div>
 8             <div class="item-info">
 9                 <p></p>
10                 <p></p>
11             </div>
12         </li>
13     </ul>
14 </template>

搜了一下这句报错的解释是：组件模板应正好包含一个根元素。如果在多个元素上使用v-if，请改用v-else-if链接它们。

原来vue组件只能包含一个根元素，要i想写多个得把他们包含在一个根元素里面，调整后代码如下：

 1 <template>
 2 <div>
 3     <div class="reconmmend-title">热销推荐</div>
 4     <ul>
 5         <li class="item">
 6             <div class="item-img-wrapper">
 7                 <img class="item-img" src="" alt="">
 8             </div>
 9             <div class="item-info">
10                 <p></p>
11                 <p></p>
12             </div>
13         </li>
14     </ul>
15 </div>
16 </template>

 

posted @ 2019-10-27 16:55  leahtao  阅读(518)  评论(0)  编辑  收藏  举报