如何使用Vuetify将v-for渲染的v-switch元素设置为两列布局？

你现有代码的核心问题是所有v-switch都放在同一个v-col中，默认会垂直堆叠排列，自然无法实现两列布局。可以用以下两种方案实现：

方案1：基于Vuetify栅格系统实现（更推荐） #

直接将v-for循环绑定在v-col上，给每个v-col设置宽度为1/2行宽（Vuetify栅格默认12列，设置cols="6"即可占一半宽度），自动实现两列排布：

<v-row>
  <v-col 
    cols="6"
    v-for="item in dominantBottomSubstrate"
    :key="item.id"
  >
    <v-switch
      v-model="selectedDominantBottomSubstrate"
      multiple
      :value="item.name"
      :label="item.value"
    >
    </v-switch>
  </v-col>
</v-row>

如果需要响应式适配，比如小屏设备下自动切换为单列，可以把属性修改为cols="12" md="6"，即可在中等及以上屏幕显示两列，小屏显示单列。

方案2：基于Flex布局实现 #

如果你不想拆分栅格，也可以用Vuetify自带的工具类给外层容器加Flex换行，每个v-switch占50%宽度实现：

<v-row>
  <v-col class="d-flex flex-wrap">
    <v-switch
      class="w-50"
      v-for="item in dominantBottomSubstrate"
      :key="item.id"
      v-model="selectedDominantBottomSubstrate"
      multiple
      :value="item.name"
      :label="item.value"
    >
    </v-switch>
  </v-col>
</v-row>

如果标签文本过长出现挤压，给v-switch加对应内边距调整样式即可。

内容的提问来源于stack exchange，提问作者BelénG