当使用v-for循环时，Textfield将出现在彼此的旁边而不是下面。

Question

我有很多文本字段，我使用v-for循环从字符串数组中获取它们的标签。问题是文本字段出现在彼此的下面，而不是像我指定的"xs6 md3“那样彼此相邻(对于xsmall到中等屏幕，每行彼此相邻的两个文本字段，每行相邻的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>