V-for on rendering multiple elements - html

Question

Just trying to pick up Vue.js so please be gentle :smiley:
The issue I’m facing is that when i’m binding elements separately on two different columns it everything works, but it messes up my layout. All images load on first row and articles are rendered below.
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>```
So, I decided to put the v-for on the row class instead and have it loop through image and article one after another, rather than loading all images first and then all the articles.
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>```
I’m not sure if I’m failing at declaring it properly, but I’m getting the following error =>
(source: vuejs.org)
Any help would be much appreciated.

Answer 1

Wrap your template in a 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>
Why?
You can only have one root element in your template; v-for makes multiple.

Answer 2

Thats the final template that worked for me...
<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>