V-のためだけので優しくしてくださいVue.jsをピックアップしようとしている複数の要素

Question

をレンダリングする上：スマイリー：

私が直面してるの問題は、私は2つの異なる列に個別の要素を結合していて、すべてしかし、それは私のレイアウトを混乱させる。すべての画像が最初の行に読み込まれ、記事が下に表示されます。

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

だから、私はむしろ、最初にして、すべての記事をすべての画像をロードするよりも、別の後に代わりの行クラスのV-用を入れて、それを画像や記事1をループをすることにしました。

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

私はそれを正しく宣言で失敗してるかどうかわからないんだけど、私は=>

次のエラーを取得しています任意の助けもいただければ幸いです。

Answer 1

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

なぜにあなたのテンプレートをラップ？

テンプレートには1つのルート要素しか含めることができません。 v-forは複数を作る。私のために働いた最終テンプレートザッツ

Answer 2

...

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