使用Vuetify时，v-for循环的v-text-field如何按xs6 md3横向排列？

嘿，我一眼就发现问题所在啦！你现在把v-for循环写在了<v-layout>标签上，这会导致每一个numberField都生成一个独立的<v-layout>容器——每个容器里只有一个<v-flex>元素，自然就会上下堆叠，根本没法形成一行多个输入框的布局。

正确的写法应该是这样的： #

把v-for移到<v-flex>标签上，让整个列表共享同一个<v-layout>容器，由它来统一控制换行和布局规则：

<v-container py-0>
  <!-- 只保留一个v-layout，负责整体的换行和布局方向 -->
  <v-layout wrap row>
    <!-- 将v-for放在v-flex上，循环生成每个输入框的弹性容器 -->
    <v-flex xs6 md3 v-for="(numberField, index) in numberFields" :key="index">
      <v-text-field :label="numberField" mask="#########" color="blue" />
    </v-flex>
  </v-layout>
</v-container>

额外注意点： #

• 务必给v-for添加:key属性（这里用index是最简单的方式，如果你的numberField都是唯一值，也可以直接用:key="numberField"），这是Vue的要求，能避免渲染时的性能问题和异常。
• <v-layout>上的wrap属性是关键，它会让弹性容器里的元素在一行空间不足时自动换行，再配合xs6（小屏占1/2宽度，即一行2个）和md3（中屏及以上占1/4宽度，即一行4个）的响应式规则，就能完美实现你想要的布局效果啦！

内容的提问来源于stack exchange，提问作者seyet