two nested v-for loops of which the inner one shouldn’t display its element but is needed for getting class attributes

Question

how would we solve having two nested v-for loops (elements), of which one is solely for getting class attributes and shouldn't display its div element? because it is of course displaying its element in each iteration and causing a break in the layout and displaying duplicated data because of those iterations

DESIRED OUTCOME: I need to be able to use values from an array, for the column width of the rendered values of a loop, as interpolation in the class attribute along with their corresponding rendered values.

live example: https://stackblitz.com/edit/vitejs-vite-kkzp2g?file=src/components/HelloNestedLoop.vue

Answer 1

Use a <template> tag instead of <div> for the outer element:

<template v-for="...">
  <div v-for="...">
  </div>
</template>