Question

Vue版本：2.6.10

Vuetify版本：1.5

这时，我将for循环中的每个项目放在不同的行中。如果只有2个项目，我想将它们留在1行中。如果是3-4个项目-2行，依此类推。

我的代码：

<template v-slot:expand="props">
                    <v-card flat>
                        <v-card flat="flat" color="dark">
                            <v-container fluid="fluid" grid-list-xl="grid-list-xl">
                                <v-layout row>
                                    <v-flex xs8>Position and workload: </v-flex>
                                    <v-flex xs4>Categories: </v-flex>
                                </v-layout>
                                <v-layout row>
                                    <v-flex xs3>
                                        <template v-for="(position, pindex) in props.item.position">
                                            <v-text-field v-bind:key="pindex" class=" expandable" type="text" size="45"
                                                style="float:right" v-model="position.position" />
                                        </template>
                                    </v-flex>
                                    <v-flex xs1>
                                        <template v-for="(workload, windex) in props.item.workload">
                                            <v-text-field v-bind:key="windex" class="expandable" type="text" size="5"
                                                style="float:left" v-model="props.item.workload[windex]" />
                                        </template>
                                    </v-flex>
                                    <v-spacer></v-spacer>
                                    <v-flex xs4>
                                        <div>
                                            <v-text-field class="expandable" type="text"
                                                v-model="props.item.categories" />
                                        </div>
                                    </v-flex>
                                </v-layout>
                            </v-container>
                        </v-card>
                    </v-card>
                </template>

这是输出：

想要的输出：

Answer 1

部分答案代码。到第一行，第三行，第四行等元素的所有内容都不会移至下一行。如果我使用包装纸，则“类别会下降，而不是排名下降。

C:> powershell .\post "'http://domain/api/app?pLanguage=en-US&pCompanyID=816'" "'{\"Message\":\"test message - please ignore\"}'"

带有for循环的Vuetify网格系统

1 个答案: