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

Question

我有很多文本字段，我使用v-for循环从字符串数组中获取标签。问题是文本字段显示在彼此之下而不是彼此相邻，因为我已经指定了“xs6 md3”（对于xsmall到中等屏幕，每行中彼此相邻的两个文本字段，对于中等到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

我想这是因为你重复布局而不是弹性项目。

尝试类似的东西：

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