Question

只是想拿起Vue.js所以请保持温柔：笑脸：

我面临的问题是，当我将元素分别绑定在两个不同的列上时，一切正常，但它会弄乱我的布局。所有图像都在第一行加载，文章在下面呈现。

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-for放在行类上，让它循环遍历图像和文章，而不是首先加载所有图像，然后加载所有文章。

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

我不确定我是否未能正确宣布，但我收到以下错误=＆gt;

非常感谢任何帮助。

Answer 1

将模板包装在div中

Document : document_id int(10)
           name        varchar(10)
           type        image (doesnt know how it might works)

为什么？

您的模板中只能有一个根元素; 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>

V-for渲染多个元素

2 个答案: