How can i cut this code via v-for Vue JS?-CodePudding

Can`t reduce this code via v-for:

<v-menu v-model="menu" :close-on-content-click="false" offset-y>
        <v-container fluid >
          <v-row>
            <v-col >
              <v-checkbox v-for="item in types.slice(0,6)" :key="item.type" hide-details :label="item.name"></v-checkbox>
            </v-col>
            <v-col >
              <v-checkbox v-for="item in types.slice(6,12)" :key="item.type" hide-details :label="item.name"></v-checkbox>
            </v-col>
            <v-col >
              <v-checkbox v-for="item in types.slice(12,18)" :key="item.type" hide-details :label="item.name"></v-checkbox>
            </v-col>
          </v-row>
        </v-container>
    </v-menu>

types: [
      { type: 0, name: 'Item_1' },
      { type: 1, name: 'Item_2' },
      { type: 2, name: 'Item_3' },
      { type: 3, name: 'Item_4' },
      { type: 4, name: 'Item_5' },
      { type: 5, name: 'Item_6' },
      { type: 6, name: 'Item_7' },
      { type: 7, name: 'Item_8' },
      { type: 8, name: 'Item_9' },
      { type: 9, name: 'Item_10' },
      { type: 10, name: 'Item_11' },
      { type: 11, name: 'Item_12' },
      { type: 12, name: 'Item_13' },
      { type: 13, name: 'Item_14' },
      { type: 14, name: 'Item_15' },
      { type: 15, name: 'Item_16' },
      { type: 16, name: 'Item_17' },
      { type: 17, name: 'Item_18' },
      { type: 18, name: 'Item_19' },
    ]

Codepen example: https://codepen.io/aurorame/pen/WNdjxYM

Try to make it via use v-for in v-col, but how to slice it correctly?

CodePudding user response：

You could use v-for in a range (starts at index 1), and calculate the splice indexes for the three rows:

<v-col  v-for="i in 3">
  <v-checkbox v-for="item in Object.keys(items).slice((i-1)*3, (i-1)*3 6)" :key="item" hide-details :label="items[item].label"></v-checkbox>
</v-col>

demo

CodePudding user response：

You can achieve that goal via "computed properties" of Vue. Here is the code that works for me:

<template>
  <v-app>
    <v-menu v-model="menu" :close-on-content-click="false" offset-y>
      <v-container fluid >
        <v-row>
          <v-col  v-for="(newItem, index) in eachPart" :key="index">
            <v-checkbox v-for="item in newItem" :key="item.type" hide-details :label="item.name"></v-checkbox>
          </v-col>
        </v-row>
      </v-container>
    </v-menu>
  </v-app>
</template>

<script>
export default {
  name: "LoopView",
  data() {
    return {
      menu: true,
      /* here you define the number of column. you can change it to 3 */
      part: 4,
      types: [
        { type: 0, name: 'Item_1' },
        { type: 1, name: 'Item_2' },
        { type: 2, name: 'Item_3' },
        { type: 3, name: 'Item_4' },
        { type: 4, name: 'Item_5' },
        { type: 5, name: 'Item_6' },
        { type: 6, name: 'Item_7' },
        { type: 7, name: 'Item_8' },
        { type: 8, name: 'Item_9' },
        { type: 9, name: 'Item_10' },
        { type: 10, name: 'Item_11' },
        { type: 11, name: 'Item_12' },
        { type: 12, name: 'Item_13' },
        { type: 13, name: 'Item_14' },
        { type: 14, name: 'Item_15' },
        { type: 15, name: 'Item_16' },
        { type: 16, name: 'Item_17' },
        { type: 17, name: 'Item_18' },
        { type: 18, name: 'Item_19' },
      ],
    }
  },
  computed: {
    typesLength: function () {
      return this.types.length;
    },
    eachPart: function () {
      /* you can also use "Math.floor" if that is more suitable for your design */
      let chunkSize = Math.ceil( this.typesLength / this.part );
      let partArr = []
      for (let i = 0; i < this.typesLength; i  = chunkSize) {
        const chunk = this.types.slice(i, i   chunkSize);
        partArr.splice(i, 0, chunk);
      }
      return partArr
    }
  }
}
</script>

<style scoped>

</style>