CODEWITHSUNDEEP
htmlvue.jsbootstrap-4
forkinspace
forkinspace

Reputation: 124

V-for on rendering multiple elements

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.

Upvotes: 0

Views: 7784

Answers (2)

Manish
Manish

Reputation: 5213

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.

Upvotes: 4

forkinspace
forkinspace

Reputation: 124

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>

Upvotes: 0

Related Questions