Question

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

我已经将所谓的TrainerCards代码移到了一个单独的组件中，当这些卡片在TrainerIndex.vue中进行硬编码时，它们可以很好地显示为三行，但是现在它们作为一个组件传递了，它们仅渲染为每行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>

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

1 个答案: