web-dev-qa-db-ja.com

Vuetifyグリッドシステムでカードコンポーネントをループ表示する方法は？

注：機能とスタイル設定にVue.jsとVuetify.jsを使用する

v-forを使用して動的に生成されたカードコンポーネントがあり、画面サイズ（sm/md/lg）に応じて、1/3/4カードの行にそれらを表示したい。 v-flex要素とv-layout要素を使用してVuetifyのグリッドシステムに配置すると、2行目に移動するのではなく、カードが最小化されます。

これについて別の方法はありますか？

<v-content>
  <v-card class="d-inline-flex" v-for="company of companies" :key="company.name">
    <v-layout >
      <v-flex md6 lg6>
        <img class="company-logo" src="../assets/img/example-logo.png" alt="company logo">
      </v-flex>
      <v-flex md6 lg6>
        <v-card-title class="headline pl-0">{{company.name}}</v-card-title>
        <article class="text-md-left text-lg-left">
          <v-btn @click="selectDashboard(href('stats', company.name))" :value="company.name"><v-icon>local_offer</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('process', company.name))" :value="company.name"><v-icon>notifications</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('example', company.name))" :value="company.name"><v-icon>rate_review</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('alerts', company.name))" :value="company.name"><v-icon>explore</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('profile', company.name))" :value="company.name"><v-icon>room</v-icon></v-btn>
        </article>
      </v-flex>
    </v-layout>
  </v-card>
</v-content>

ビジュアルの場合、このコードペンは画像の幅のサイズが小さくなっていることを示しています（ただし、高さのサイズは同じです）- https://codepen.io/johnjleider/pen/aLXBez?editors=1111

vue.jsgrid-systemvuetify.js
6
stormynpip

<v-flex>グリッドの最大値は12です。したがって、xs12（余分な小さなブレークポイント）<v-flex xs12>次のブレークポイントに到達するまで、すべてのグリッド幅を使用します（別のブレークポイントを設定しない場合、最も低いものがすべての画面幅に適用されます）。したがって、<v-flex xs12 md6>、中程度のブレークポイントに到達すると、各カードは6グリッドスペースを占めるため、2枚のカードを並べて配置できます。設定lg3、同じスペースに4枚のカードを収めることができます。

あなたの例のこの変更で機能していることがわかります https://codepen.io/twandy/pen/JrxamB?editors=1001

5
jordanw

受け入れられた回答は、Vuetifyのv2では機能しませんでした。

これで<v-col>を使用できるようになり、以下のようになります。

<v-row>
    <v-col cols="12" sm="3" md="4" v-for="(something, index) in somethingsArray" :key="index" >
        <my-component :my-data="something" />
    </v-col>
</v-row>

ここで、cols="12"はxs="12"と同じで、列は12スペースすべてを占めます。

サイズ設定は、最小の画面から拡大します。次に、小さな画面では各列が4スペースを占め、結果として3列になります。中規模および大規模な画面では、3つのスペースを使用して4列になります。

|__|__|__|__|__|__|__|__|__|__|__|__|  12 spaces in the grid
|-----------------------------------|  <-cols=12 (1 column)
|--------|--------|--------|--------|  <-sm=3 (4 columns)
|-----------|-----------|-----------|  <-md=4 and larger (3 columns)
1
Ju66ernaut