Текстовые поля появляются рядом друг с другом, а не под друг другом при использовании цикла v-for

Question

У меня есть много текстовых полей, для которых я использую цикл v-for, чтобы получить их метку из массива строк. Проблема в том, что текстовые поля отображаются друг под другом, а не рядом друг с другом, как я указал «xs6 md3» (для экранов xsmall и 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

Полагаю, это потому, что вы повторяете макет, а не гибкий элемент.

Попробуйте что-то вроде:

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