[Vuejs]-Vue Components style display differently on page than when not used as components

by

0👍

✅

Your col-md-4 class is what makes them fill 1/3 of the area, but that is now outside your component and not repeating. Move that div inside:

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

Leave a comment