1
I have a method that does a search in an api made in Arabic and returns me a json, I need to go through this json in a v-for and every 3 interactions a new Row is created. In PHP it would look something like this.
foreach ($variable as $key => $value) {
if($i == 3){
echo "</div>"; //fecha a div de classe row
echo '<div class="row">'; //Abre a div de classe row
}
}
If anyone can give me a light thank you.
<template>
<div class="row">
<div class="card bg-primary-gradient collapsed-card" v-for="(item, index) in items" :key="index.id">
<div class="card-header">
<h3 class="card-title">{{item.title}}</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body" style="display: none;">
{{item.price}}
</div>
<!-- /.card-body -->
</div>
</div>
You need to study some CSS and the framework you are using (apparently Bootstrap). The question has more to do with CSS than with Vue or Laravel
– fernandosavio
Dear your question is very confused, where would be inserted the columns?
– LeAndrade
@fernandosavio boa tarde bom a dúvida é o seguinte da api do Laravel vem um json eu preciso percorrer esse array e a cada interação quero que seja criado uma nova linha, no php seria simples colocar o foreach e quando index fosse
== 3
create a new line and repeat the operation again, thing that in vuejs do not know how to do– PaulinhoCaP
@Leandrade every 3 iteration I want to create a new row and within this new row the 3 columns, and so on until the iteration with the array is finished
– PaulinhoCaP
But which data do you want to replicate?
– LeAndrade
@Leandrade the cards there where you have the
v-for
I want to replicate it inside a Row every 3 iterations and close Row then open again and do 3 more until there is no more data in the array– PaulinhoCaP
But from what it looks like you’re already doing the for and iterating the data, I think the problem there is how Fernando mentioned it above, you have to tinker with the CSS to only fit three cards per line and break into a new one when you have more.
– LeAndrade
@Leandrade yes I’m already iterating the problem and on
v-if
where should I put it so I can close the</div>
of class Row and open a new</div>
Row-class– PaulinhoCaP