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
– maxshuty, Commented Apr 4, 2020 at 12:21
I've tried, but the added <div v-for=""> will mess up the layout. See the attached screen in the question — guggio
– guggio, Commented Apr 4, 2020 at 12:22
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
– guggio, Commented Apr 4, 2020 at 15:24

Zoilo Granda · Accepted Answer · 2020-04-08 16:40:16Z

1

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/

edited Apr 8, 2020 at 16:40

answered Apr 8, 2020 at 3:46

Zoilo Granda

3412 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

guggio Over a year ago

Thanks for the help. There is only one thing that is missing in the jsfiddle. I need to have an <div> with a background image and another one with the related text. In the fiddle I see only the div that will contain the text, the one (the blank one in the fiddle) that will contain the image will be not looped and this isn't what I want to achieve. If I add a v-for also on it, will this do the trick?

Zoilo Granda Over a year ago

@guggio I updated the answer to include the other div, please check it out

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related