Question

我的v-flex不尊重我的订单，只渲染了一半的元素。看到印刷品：

这是我的剧本：

<v-card-title primary-title>
              <div>
                <p class="subheading grey--text">My title</p>
                <h3 class="headline my-4">my sub title</h3>
                <div>
                  <v-container fluid>
                    <v-card flat v-for="ticket in tickets" :key="ticket.id">
                      <v-layout row wrap :class="`pa-2 ticket ${ticket.status.id}`">
                        <v-flex xs3>
                          <div class="caption grey--text">#ID</div>
                          <div>{{ticket.id}}</div>
                        </v-flex>
                        <v-flex xs3>
                          <div class="caption grey--text">Assunto</div>
                          <div>{{ticket.subject}}</div>
                        </v-flex>
                        <v-flex xs3>
                          <div class="caption grey--text">Criado em</div>
                          <div>{{ticket.created_on}}</div>
                        </v-flex>
                        <v-flex xs3>
                          <div class="right">
                            <v-chip
                              small
                              :class="`${ticket.status.id} white--text caption my-2`"
                            >{{ticket.status.name}}</v-chip>
                          </div>
                        </v-flex>
                      </v-layout>
                    </v-card>
                  </v-container>
                </div>
              </div>
            </v-card-title>

有人有什么主意吗？

Tks。

Answer 1

您可以在第7行的v卡上方添加全角伸缩框：

 <v-flex xs12>
   <v-card flat v-for="ticket in tickets" :key="ticket.id">  
     ...

编辑：我的错误...再看一遍，您可以将第2行的div更改为v-flex，这将为您提供类似于以下代码笔的结果：https://codepen.io/retrograde/pen/ZNYJRq?editors=0001请注意，我删除了代码由我的原始答案添加。

Vuetify V-flex仅卡满一半

1 个答案: