[Vuejs]-How can I make a v-for loop inside a Bootstrap grid?

by

0👍

Try the giving the display as flex for class ‘col-3’

<div id="app">
                <div class="col-3" style="display: flex;">
                    <div v-for="product in products" class="producte">
                        <div class="imgdesc">
                            <img :src="product.urlimg" class="img-fluid"><br>
                            {{ product.desc }}<br>
                        </div>
                        <img v-if="product.cartell === 'new'" src="imgs/sign_new_offer.png" class="cartell">
                        <img v-if="product.cartell === 'offer'" src="imgs/sign_offer.png" class="cartell">
                    </div>
                </div>
</div>

Also Note that you have put one extra closing tag for div [] which has to be removed

0👍

The v-for directive should be used when you use the col-x class :

     <div id="app" class="row">
                <div class="col-3" v-for="product in products" >
                    <div class="producte">
                        <div class="imgdesc">
                            <img :src="product.urlimg" class="img-fluid"><br>
                            {{ product.desc }}<br>
                        </div>
                        <img v-if="product.cartell === 'new'" src="imgs/sign_new_offer.png" class="cartell">
                        <img v-if="product.cartell === 'offer'" src="imgs/sign_offer.png" class="cartell">
                    </div>
                </div>
            </div>
        </div>

Leave a comment