错误信息如下
[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>回帖数 {
{s.answer_num}}</span>
</div>
<div class="row h5">发布时间 {
{s.post_time}} </div>
<div class="row h5"> {
{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>回帖数 {
{s.answer_num}}</span>
</div>
<div class="row h5">发布时间 {
{s.post_time}} </div>
<div class="row h5"> {
{s.post_content}}</div>
<div class="row"><img :src="s.post_img" class="post_img"/></div>
</template>
</div>
</div>
<!-- 发帖 -->