使用for循环验证网格系统
使用for循环验证网格系统
提问于 2019-08-29 06:48:03
Vue版本: 2.6.10
验证版本: 1.5
此时，我在不同的行中获取for循环中的每一项。如果只有2个项目，我想让它们排成一行。如果是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>此时，输出如下：
想要的输出：
回答 1
Stack Overflow用户
发布于 2019-08-29 15:38:05
部分回答代码。所有到某一行，第3行，第4行，以此类推的元素，都不会到更低的行。如果我使用的是wrap“类别将会更低而不是位置。
<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>Pareigos ir krūvis: </v-flex>
<v-flex xs4>Kategorijos: </v-flex>
</v-layout>
<v-layout row>
<template v-for="pindex in props.item.position.length">
<v-flex xs3>
<v-text-field class=" expandable" type="text" size="45" style="float:right"
v-model="props.item.position[pindex - 1].position" />
</v-flex>
<v-flex xs1>
<v-text-field class="expandable" type="text" size="5" style="float:left"
v-model="props.item.workload[pindex - 1]" />
</v-flex>
</template>
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57700912
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号