[Vuejs]-V-if in v-for is messing up the css

by

0👍

✅

Almost sure it’s because you add an additionnal div block when using v-if which vertically place element.

Instead of:

<div class="row" v-for="row in workouts" :key="row.id">
  <div v-if="row.day==1">
    <div class="post">
      <img class="img" :src="'/storage/'+row.path" alt="">
      <p class="p h5">{{row.title}} </p>
      <p class="p">{{row.description}}</p>
    </div>
  </div>
</div>

Try this:

<div class="row" v-for="row in workouts" :key="row.id">
    <div v-if="row.day==1" class="post">
       <img class="img" :src="'/storage/'+row.path" alt="">
       <p class="p h5">{{row.title}} </p>
       <p class="p">{{row.description}}</p>
    </div>
</div>

1👍

Without seeing your CSS, this is difficult to answer.

My guess is that the extra <div> fails to match your CSS selectors. For example, you have something like this…

.row > .post {
  /* styles for rows */
}

… and adding a <div> between .row and .post breaks it

The best option here is to create a computed property to filter your day === 1 entries

computed: {
  firstDayWorkouts: ({ workouts }) => workouts.filter(({ day }) => day === 1)
}

<div class="row" v-for="row in firstDayWorkouts" :key="row.id">
  <div class="post">
    <img class="img" :src="'/storage/'+row.path" alt="">
    <p class="p h5">{{row.title}} </p>
    <p class="p">{{row.description}}</p>
  </div>
</div>

Leave a comment