How to avoid Vue.js v-for duplicating bootstrap row

Question

I have this code for a wordpress custom theme. I'm getting the data using the REST API and Vue.js to make the DOM change dynamically on click event. I'm facing a little problem, I'm not able to display the data with the layout I want, this because when I use the v-if on the main row where I want to run my vue app, this will duplicate the row, but I want only to have the needed columns for the layout. I'm using bootstrap 4, and the columns are col-*-3 so inside a row it's supposed that there are four columns. How I can fix this ?

  <div class="row bg-light p-5 mt-3" v-for="cat in catList" >

    <div class="col-sm-12 col-md-12 col-lg-12 p-0">
      <div class="dropdown">
        <a class="text-uppercase dropdown-toggle dropdown-toggle-split" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <?php _e('Collezioni'); ?>
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <a  v-on:click="displayCategory(cat.id)" class="dropdown-item" href="#">{{ cat.name }}</a>
        </div>
      </div>
    </div>

    <div class="col-sm-12 col-md-3 col-lg-3 col-background shadow-lg mt-5 mb-5 p-0" data-bg-url="" style="height:50vh;"></div>
    <div class="col-sm-12 col-md-3 col-lg-3 col-offset-top shadow-lg darkblue position-relative mt-5 mb-5 p-5">
      <small class="text-white m-0"></small>
      <h4 class="font-weight-bold text-white mt-2 mb-0" v-if="cat.name">{{ cat.name }}</h4>
      <h4 class="font-weight-bold text-white mt-2 mb-0" v-else>{{ cat.title }}</h4>
      <p v-if="cat.description">{{ cat.description }}</p>
      <p v-else>{{ cat.content }}</p>
    </div>

  </div>

UPDATE

If I use a div <div v-for="cat in catList"> to wrap the content, the layout will break. See the screen

Just move the v-for to a div inside... like this <div class="row bg-light p-5 mt-3"><div v-for="cat in catList">...</div></div> — maxshuty
I've tried, but the added <div v-for=""> will mess up the layout. See the attached screen in the question — guggio
here is a jsfiddle: jsfiddle.net/m10bw6ko/3 Normally with php and without vue.js I will have three inline columns. The columns are two col 3 with a bit of css to create a nice overlap effect. — guggio

Zoilo Granda Zoilo Granda · Accepted Answer · 2020-04-08T03:46:15

The problem here is that the v-for if repeating every element inside the row, including the row itself. I see that you need to show the categories data on two different places, on the dropdown and on the squares on the end, but there is no need to loop and generate all the other elements in between.

There are a couple of thing you can do here, create another component for the bottom divs (the ones with the backgrounds shadow), or create two separated loops by moving the v-for="cat in catList", which will require these three changes

<!--remove the v-for="cat in catList" because this breaks everything-->
<div class="row bg-light p-5 mt-3">

<!--add one loop here for the dropdown elements-->
<a v-for="cat in catList" v-on:click="displayCategory(cat.id)" class="dropdown-item" href="#">{{ cat.name }}</a> 

<!--add the second loop here-->
<div v-for="cat in catList" class="col-sm-12 col-md-3 col-lg-3 col-offset-top shadow-lg darkblue position-relative mt-5 mb-5 p-5">

I updated the fiddle with the changes here https://jsfiddle.net/zgranda/y9d5fk67/2/

By doing this the elements should not be duplicated, but still needs some CSS fixes to the shadow

EDIT: Saw your comment and edited the fiddle, now it should loop both divs, as i don't know how it should look so you will need to tweak the CSS a little bit https://jsfiddle.net/zgranda/2w39pdac/3/

How to avoid Vue.js v-for duplicating bootstrap row

1 Answers