I'm trying to dynamically render a list of component objects in columns based on the size of the browser window. Right now, I have a computed property (columns) that calls my 'createColumns' function every time the number of columns changes. This works for rendering the columns correctly. The issue I'm having is with reactivity -- because I'm creating new lists (via array.slice), my items aren't being properly modified when I interact with them via the UI on the item component.
//computed
columns() {
return this.createColumns(this.section.questions, this.numCols);
}
// method
createColumns(items, numCols) {
const columns = [];
for (let i = 0; i < numCols; i++) {
const start = Math.ceil(i * (items.length / numCols));
const end = Math.ceil(((i + 1) * items.length) / numCols);
const colItems = items.slice(start, end);
columns.push(colItems);
}
return columns;
}
In my html, I loop through my columns and render each component item.
<b-col
v-for="(column, columnIndex) in columns"
:key="`col-${columnIndex}`"
>
<item
v-for="(item, index) in column"
:key="item.key"
:value="item"
/>
</b-col>
</b-row>
What I want to be able to do is loop through sub-sections of my original items array and render the columns of items directly from that array rather than having to create new arrays containing a subsection of the data. I had originally tried using bootstrap-vue's row-cols feature but this results in a horizontal rendering of the items, i.e.
1 2 3
4 5 6
7 8 9
Instead of
1 4 7
2 5 8
3 6 9
Which is what I'm going for
