2017-12-29 17 views
0

Nur versuchen, Rendering abholen Vue.js so bitte sanft sein: smiley:V-für auf mehrere Elemente

Das Problem, das ich mit Blick auf bin, ist, dass, wenn ich Elemente getrennt auf zwei verschiedene Spalten verbindlich es alles funktioniert, aber es vermasselt mein Layout. Alle Bilder werden in der ersten Zeile geladen und Artikel werden darunter gerendert.

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 entschied ich mich, die v-for auf der Zeilenklasse anstatt zu setzen und es Schleife durch Bild und Gegenstand einer nach dem anderen, anstatt alle Bilder zuerst geladen und dann alle Artikel.

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>``` 

Ich bin mir nicht sicher, ob ich es erklären, richtig bin Fehler, aber ich bin immer der folgende Fehler =>

Jede Hilfe wäre sehr willkommen.

+1

Bitte fügen Sie Code statt Screenshot von Code. – Manish

+0

lassen Sie mich das wirklich schnell bearbeiten. – ForkInSpace

+0

Vorlagen können nur ein Wurzelelement haben. Wenn Sie v-for für dieses Root-Element verwenden (indem Sie auf den von Ihrem Fehler ausgegebenen Code verweisen), würden Sie mehrere Fehler haben. Daher erhalten Sie den Fehler "v-for on stateful component root-Element kann nicht verwendet werden, da es mehrere rendert Elemente " –

Antwort

2

Wickeln Sie Ihre Vorlage in einem 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> 

Warum?

Sie können nur ein Wurzelelement in Ihrer Vorlage haben; v-for macht multiple.

+0

danke für die richtung hier. Ich habe die Vorlage ein wenig geändert, um sie an das Layout anzupassen, aber Ihre Lösung hat +1 funktioniert – ForkInSpace

0

Das ist die letzte Vorlage, die für mich gearbeitet ...

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