vuejs:在列中拆分项目列表

Question

我是vuejs的新手，我需要在列中拆分复选框列表，例如按列拆分四个复选框。

如果我有1-4个项目将是一列，如果我有5-8个项目将是两列，依此类推

这是我的代码：

<v-card flat class="my-0">
  <v-container fluid>
    <v-checkbox
      v-for="item in items"
      :key="item._id"
      :label="item.name"
      :value="item._id"
    ></v-checkbox>
  </v-container>
</v-card>

Answer 1

<v-checkbox
  v-for="item in items.slice(0, 4)"
  :key="item._id"
  :label="item.name"
  :value="item._id"
></v-checkbox>

<div v-if="items.size > 4"> 
  <v-checkbox
    v-for="item in items.slice(5, items.size)"
    :key="item._id"
    :label="item.name"
    :value="item._id"
 ></v-checkbox>
</div>

并将样式添加到这两个v形复选框，以便在轴网系统中以列的形式显示它们。如果你需要更多的列，你只需要从5到8再切一次，以此类推。