V-for 渲染多个元素答案

【问题标题】：V-for on rendering multiple elementsV-for 渲染多个元素
【发布时间】：2018-06-09 21:29:50
【问题描述】：

只是想学习 Vue.js，所以请温柔：笑脸：

我面临的问题是，当我在两个不同的列上分别绑定元素时，一切正常，但它弄乱了我的布局。所有图片都加载在第一行，文章在下面呈现。

the code =>

```<div class="row no-gutters"> <!-- remove horizontal paddings between columns 4 this row -->

    <div class="col-md-2"  v-for="(post, img) in posts">
      <div class="article-image">
        <img  :src="post.img" />
      </div>
    </div>


    <div class="col-md-6" v-for="(post, title) in posts" v-bind="post.id">
      <div class="article">
        <div class="card">
          <div class="card-body">
            <h3 class="card-title">{{ post.title }}</h3>
            <h6 class="card-subtitle text-muted">21st Dec 17</h6>
            <p class="card-text">{{ post.content }}</p>
          </div>
        </div>
      </div>
    </div>```

所以，我决定将 v-for 放在 row 类上，让它依次循环遍历图像和文章，而不是先加载所有图像，然后再加载所有文章。

the code =>

```<div class="row no-gutters" v-for="(post, img, title) in posts" v-bind="post.id">
    <div class="col-md-2" v-for="(post, img) in posts">
      <div class="article-image">
        <img  :src="post.img">
      </div>
    </div>
    <div class="col-md-6" >
      <div class="article">
        <div class="card">
          <div class="card-body">
            <h3 class="card-title">{{ post.title }}</h3>
            <h6 class="card-subtitle text-muted">21st Dec 17</h6>
            <p class="card-text">{{ post.content }}</p>
          </div>
        </div>
      </div>
    </div>```

我不确定我是否未能正确声明它，但我收到以下错误 =>

_{（来源：vuejs.org）}

任何帮助将不胜感激。

【问题讨论】：

请添加代码而不是代码截图。
让我快速编辑一下。
模板只能有一个根元素。通过在该根元素上使用 v-for （引用错误输出的代码），您将导致它有多个，因此为什么会出现错误“无法在有状态组件根元素上使用 v-for，因为它呈现多个元素”
@KhauriMcClain 那很明显不是吗。您对我有什么建议吗？如何实现在文章旁边显示图像而不破坏布局的目标？

标签： html vue.js bootstrap-4

【解决方案1】：

将模板包装在 div 中

<div>
  <div class="col-md-2"  v-for="(post, img) in posts">
    <div class="article-image">
      <img :src="post.img" />
    </div>
  </div>

  <div class="col-md-6" v-for="(post, title) in posts" v-bind="post.id">
    <div class="article">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">{{ post.title }}</h3>
          <h6 class="card-subtitle text-muted">21st Dec 17</h6>
          <p class="card-text">{{ post.content }}</p>
        </div>
      </div>
    </div>
  </div>
</div>

为什么？

您的模板中只能有一个根元素； v-for 使多个。

【讨论】：

感谢您的指导。我稍微更改了模板以适应布局，但您的解决方案有效 +1

【解决方案2】：

这是对我有用的最终模板......

<div>
  <div class="row no-gutters" v-for="(post, img, title) in posts" v-bind="post.id"> <!-- remove horizontal paddings between columns 4 this row -->
    <div class="col-md-2">
      <div class="article-image">
        <img  :src="post.img" />
      </div>
    </div>


    <div class="col-md-6">
      <div class="article">
        <div class="card">
          <div class="card-body">
            <h3 class="card-title">{{ post.title }}</h3>
            <h6 class="card-subtitle text-muted">21st Dec 17</h6>
            <p class="card-text">{{ post.content }}</p>
          </div>
        </div>
      </div>
    </div>
</div>

【讨论】：