How vue v-for renders the list by a fixed number of lines

there are array objects. You want to render by column. One column displays 23 rows, and the first column is greater than 23. Start rendering the second column. The data format is as follows:

   {
    "case1": [
        {
        "name": "src1"
        },
        {
        "name": "currentSrc1"
        }
    ],
    "case2": [
        {
        "name": "src2"
        },
        {
        "name": "currentSrc2"
        }
    ]
}

the final desired effect, such as the following figure, key needs to be displayed separately, and the following name is sequentially numbered:

v-forcasename,23:

Jun.18,2021

does it support flex? you can use flex or grid

.box{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

flex


it may be troublesome to process your source data directly.
you can use computed to process the source data in advance and process it into a two-dimensional array with the length of each subarray 23 , and then use this two-dimensional array to render the list

.
Menu