[Vuejs]-V-for on rendering multiple elements

by

4👍

✅

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.

👤Manish

0👍

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>
👤forkinspace

Leave a comment