html - Vue 组件样式在页面上的显示方式与未用作组件时不同

Question

我正在努力将代码块从我的 View 组件中的静态代码移动到实际的可重用组件中。

我已将所谓的 TrainerCards 代码移动到一个单独的组件中，当卡片在我的 TrainerIndex.vue 中进行硬编码时，它们曾经很好地显示为 3 行，但现在它们作为组件传递，它们每行只呈现 1 个，我不知道为什么。TrainerIndex.vue -

<div class="row">
  <div class="col-md-4">
    <TrainerCards v-for="trainer in orderBy(filterBy(trainers, searchText), sortAttribute, sortAscending)" :key="trainer.id" :trainer="trainer"/>
  </div>
</div>

`TrainerCards.vue -

<template>
  <div class="card card-profile">
    <div class="card-img-top">
        <router-link v-bind:to="'/trainers/' + trainer.id">
          <img class="img" :src="(trainer.avatar)" />
        </router-link>
    </div>
    <div class="card-body">
      <h4 class="card-title">{{trainer.full_name}}</h4>
      <h6 class="card-category">{{trainer.location}}</h6>
      <div class="card-footer">
        <TrainerTags v-for="tag in trainer.tags" :key="tag.id" :tag="tag"/>
      </div>
    </div>
  </div>
</template>

关于如何让它们正确显示的任何想法？

Answer 1

您的 col-md-4 类使它们填充了 1/3 的区域，但现在在您的组件之外并且不再重复。将那个 div 移到里面:

<div class="row">
  <TrainerCards v-for="trainer in orderBy(filterBy(trainers, searchText), sortAttribute, sortAscending)" :key="trainer.id" :trainer="trainer"/>
</div>


<template>
  <div class="col-md-4">
    <div class="card card-profile">
      <div class="card-img-top">
          <router-link v-bind:to="'/trainers/' + trainer.id">
            <img class="img" :src="(trainer.avatar)" />
          </router-link>
      </div>
      <div class="card-body">
        <h4 class="card-title">{{trainer.full_name}}</h4>
        <h6 class="card-category">{{trainer.location}}</h6>
        <div class="card-footer">
          <TrainerTags v-for="tag in trainer.tags" :key="tag.id" :tag="tag"/>
        </div>
      </div>
    </div>
  </div>
</template>