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.
Bitte fügen Sie Code statt Screenshot von Code. – Manish
lassen Sie mich das wirklich schnell bearbeiten. – ForkInSpace
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 " –