javascript - Bootstrap 无法与 VueJS 中的数组道具一起正常工作

Question

我试图让两个 div 在循环遍历 VueJS 中的道具（恰好是一个数组）时并排出现。当我使用单个元素时，它工作正常。当我添加 v-for 标签时，它立即不再并排出现。

<div class="row">
    <div v-for="(data,index) in data" :key="index" class="col-12">
      <div v-if="data.image" class="col-xs-12 col-md-3 image-div">
        <img class="image" :src="data.image" alt="image">
      </div>
      <div class="col-xs-12 col-md-9">
        <p class="title">{{data.title}}</p>
        <p class="description">{{data.description}}</p>
        <p class="bottom">
          <span class="left"><span class="tag">{{data.tag}}</span><span class="time"> | {{data.time}}</span></span>
          <span class="right"><v-icon>bookmark</v-icon><v-icon>share</v-icon></span>
          </p>
      </div>
    </div>
  </div>  

以上是我正在使用的代码

标签： javascripttwitter-bootstrapvue.js

Answer 1

似乎您只是缺少网格嵌套.row所需的

<div v-for="(data,index) in data" :key="index" class="col-12">
  <div class="row"> <!--  this one -->
    <div v-if="data.image" class="col-xs-12 col-md-3 image-div">
      <img class="image" :src="data.image" alt="image">
    </div>
    <div class="col-xs-12 col-md-9">
      <!-- etc -->
    </div>
  </div>
</div>