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

川长思鸟来 2022-02-25 13:08 231阅读 0赞

### ***错误信息如下*** ###

*\[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>

--------------------