使用 v-for 循环时，文本字段彼此相邻而不是彼此下方

Question

我有很多文本字段，我使用 v-for 循环从字符串数组中获取它们的标签。问题是文本字段出现在彼此下方，而不是像我指定的 "xs6 md3" 那样彼此相邻（对于 xsmall 到 medium 屏幕，每行中两个文本字段彼此相邻，对于 medium 到 xlarge 屏幕，每个旁边有 4 个文本字段每行其他）

这是我的代码：

 .
 .
 <v-container py-0>
          <v-layout wrap row v-for="numberField in numberFields">
            <v-flex xs6 md3>
              <v-text-field
                 :label="numberField"
                 mask="#########"
                 color="blue"
              />
            </v-flex>
 .
 .
 data: () => ({
    numberFields:[
    "option1","option2", ... "option 57"]
 .
 .

这就是我得到的。文本字段彼此下方，而不是彼此相邻放置，直到该行已满，然后移动到下一行。如何让它们按照我指定的方式显示 "xs6 md3"?

Answer 1

我猜这是因为你重复的是布局而不是 flex 项目。

试试这样的：

<v-layout wrap row>
        <v-flex xs6 md3 v-for="numberField in numberFields">
        ...
        </v-flex>
</v-layout>

使用 v-for 循环时，文本字段彼此相邻而不是彼此下方

Textfields to appear next to each other instead of underneath each other when using a v-for loop

loops

for-loop

textarea

vue.js

vuetify.js