1

Tenho um metodo que faz uma busca numa api feita em laravel e me devolve um json, preciso percorrer esse json num v-for e a cada 3 interações seja criada uma nova row. No PHP seria mais ou menos assim.

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
        }
    }

Se alguém puder me dar uma luz agradeço.

<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>

8
  • 1
    Você precisa estudar um pouco de CSS e do framework que você está usando (aparentemente Bootstrap). A pergunta tem mais a ver com CSS do que com Vue ou Laravel Commented 11/01/2019 às 17:17
  • Cara sua pergunta está bem confusa, onde seriam inseridas as colunas?
    – LeAndrade
    Commented 11/01/2019 às 17:17
  • @fernandosavio boa tarde bom a duvida é 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 colocaria o foreach e quando index fosse == 3 criaria uma nova linha e repetia a operação novamente, coisa que no vuejs não sei como fazer Commented 11/01/2019 às 17:45
  • @LeAndrade a cada 3 iteração quero criar uma nova linha e dentro dessa nova linha as 3 colunas, e assim sucessivamente até acabar a iteração com o array Commented 11/01/2019 às 17:48
  • Mas qual dado quer ir replicando?
    – LeAndrade
    Commented 11/01/2019 às 17:53

2 Respostas 2

3

Vejo duas soluções práticas para seu problema:

1. Solução mediana

Criar uma computed property que forneça um array de arrays, onde cada array "filho" tenha 3 elementos apenas. Ex.:

new Vue({
  el: "#app",
  data: {
    items: [
      {nome: "Item 1", preco: 10},
      {nome: "Item 2", preco: 20},
      {nome: "Item 3", preco: 30},
      {nome: "Item 4", preco: 40},
      {nome: "Item 5", preco: 50},
      {nome: "Item 6", preco: 60},
      {nome: "Item 7", preco: 70},
      {nome: "Item 8", preco: 80},
    ]
  },
  computed: {
    chunks() {
      let result = []
      for (let i=0, l=this.items.length; i<l ; i+=3) {
        let chunk = []
        this.items[i] && chunk.push(this.items[i])
        this.items[i+1] && chunk.push(this.items[i+1])
        this.items[i+2] && chunk.push(this.items[i+2])
        result.push(chunk)
      }
      return result
    }
  }
  
})
.item {
  display: inline-block;
  width: 150px;
  border: 1px solid #babaca;
  margin: 3px;
  padding: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <div v-for="(chunk, i) in chunks" :key="i" class="container">
    <div v-for="(item, j) in chunk" :key="j" class="item">
      {{ item.nome }} ({{ item.preco }})
    </div>
  </div>
</div>

2. Solução melhor

Use CSS para personalizar a apresentação dos seus dados. Você pode utilizar Flexbox ou utilizar o sistema de grids do framework CSS que você já está utilizando. Exemplo usando Bootstrap 4 Grid:

new Vue({
  el: "#app",
  data: {
    items: [
      {nome: "Item 1", preco: 10},
      {nome: "Item 2", preco: 20},
      {nome: "Item 3", preco: 30},
      {nome: "Item 4", preco: 40},
      {nome: "Item 5", preco: 50},
      {nome: "Item 6", preco: 60},
      {nome: "Item 7", preco: 70},
      {nome: "Item 8", preco: 80},
    ]
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


<div id="app" class="container-fluid">
  <div class="row">
    <div class="col-4" v-for="(item, i) in items" :key="i">
      <div class="card">
        <div class="card-body">
          <div class="card-title">{{ item.nome }}</div>
          <div class="card-text">{{ item.preco }}</div>
        </div>
      </div>
    </div>
  </div>
</div>

1
  • Grato pela ajuda Commented 11/01/2019 às 19:34
0

const app = new Vue({
  el:"#app",
  data:{
    items: [
      'feijão',
      'arroz',
      'macarrão',
      'carne',
      'tomate',
      'pimentão',
      'farofa',
      'cuscuz',
    ]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(item, i) in items" :key="i">
     {{item}}
    <!--Executa o módulo do índice com o 3. Sempre que a divisão do índice por 3 tiver um resto igual a 2, o if é verdadeiro-->
    <div v-if="i%3===2">nova linha a cada 3</div>
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .