Цикл V-for, который также разбивает строки при выполнении условия - PullRequest
Новая
       14

Цикл V-for, который также разбивает строки при выполнении условия

0 голосов
/ 10 июня 2019

Я пытаюсь создать сетку, которая отображает до 3 или 4 карт на линию в зависимости от количества элементов в списке.я могу показать все элементы в одной строке, но как мне разбить его на несколько строк / строк?

При попытке использовать "столбец" или "строку" в моем v-макете, он дает мне только одинили другой.

Вот код: 

<template>
    <v-container grid-list-md text-xs-center>
      <v-content>
    <div>
      <ToolBar showIcons/>
    </div>
        <div class="dashboardPadding">
          <v-layout align-center justify-center row fill-height v-for="(item, i) in items" :key="`${item}-${i}`">
            <template >
              <v-flex xs3 >
                <v-card class="cardStyle">
                  <v-toolbar dark class="backgroundStyle" >
                    <v-toolbar-title class="toolbarStyle">

                      {{item.item_id}}

                    </v-toolbar-title>
                  </v-toolbar>
                  <v-card-text class="cardTextStyle">
                    <v-icon size="90">{{item.item_name}}</v-icon>
                  </v-card-text>
                </v-card>
              </v-flex>
            </template>
          </v-layout>
        </div>
      </v-content>
    </v-container>
</template>

<script>

import ToolBar from '@/components/component/ToolBar'
import { when } from 'q';


 let interval = null;    

  export default {

      components: {
        ToolBar
    },
    methods: {

      },
      beforeMount(){

        this.$cookie.get('token')


      },
       data () {

      return {

        items: [
              {
                item_id:1,
                item_name:"name",
              },
             {
                item_id:2,
                item_name:"name",
              },
             {
                item_id:3,
                item_name:"name",
              },
             {
                item_id:4,
                item_name:"name",
              },
            ],
    }, 
  }

</script>

<style scoped>
.backgroundStyle{
  background: linear-gradient(90deg, #6A1B9A, #CE93D8);
  height: 35px;
}
.cardStyle{
    height: 150px;
    cursor: pointer;
}
.toolbarStyle{
  padding-bottom: 10%;
  padding-top: 5%;
  padding-left: 0%
}
.cardTextStyle{

  font-size: 3em;
  font-weight: bold;
  display: block;

}
.dashboardPadding{
  padding-top: 15%;
}
</style>
...