[Vue warn]: Error compiling template: Cannot use v-for on stateful component root element because it

错误信息如下

[Vue warn]: Error compiling template: Cannot use v-for on stateful component root element because it renders multiple elements. 1 | <div id="mpost" v-for="s in sites"> | ^^^^^^^^^^^^^^^^^^ 2 | <div class="container"> 3 | <div class="row text-center h3"></div> (found in <Root>) at vue.js : 634

---

报错原因

在使用v-for循环遍历的时候，下面只能有一个标签，什么意思，下面有一个示例，供大家理解

错误示例
<div id="mpost"  >
<div class="container" v-for="s in sites">     这个v-for循环下面有5个相同的div标签，只能有一个独一无二的标签
      <div class="row text-center h3"></div>
      <div class="row h5">
      <span id="pid">{{s.post_id}}</span>
      <span id="pname">{{s.post_byname}}</span>
      <span>回帖数&nbsp;&nbsp;{{s.answer_num}}</span>
      </div>
      <div class="row h5">发布时间&nbsp;&nbsp;{{s.post_time}} </div>
      <div class="row h5">&nbsp;&nbsp;&nbsp;&nbsp;{{s.post_content}}</div>
      <div class="row"><img :src="s.post_img" class="post_img"/></div>
      </div>
</div>

正确示例

<!-- 发帖 -->
<div id="mpost"  >
<div class="container" v-for="s in sites">  这个v-for下面只有一个独一无二的标签    <template>，没有两个 <template>就可以了
    <template>
      <div class="row text-center h3"></div>
      <div class="row h5">
      <span id="pid">{{s.post_id}}</span>
      <span id="pname">{{s.post_byname}}</span>
      <span>回帖数&nbsp;&nbsp;{{s.answer_num}}</span>
      </div>
      <div class="row h5">发布时间&nbsp;&nbsp;{{s.post_time}} </div>
      <div class="row h5">&nbsp;&nbsp;&nbsp;&nbsp;{{s.post_content}}</div>
      <div class="row"><img :src="s.post_img" class="post_img"/></div>
    </template>
      </div>
</div>
<!-- 发帖 -->

---