Multiple Vertical Lists Using For Loop

Get Help
1

Hello,

I am trying to make a component which contains an unknown number of vertical lists. The amount of options in these vertical lists is also unknown.

I initially tried this:

        :for="(section, index) in $sections"
          :ref="'section' + $index"
          :y="$index * ($section.options.length) * 140"

However, it seems to space them all according to the amount of options in the last section. So if my first list has 2 options and then my second has 5, there will be extra space between the two. If the two lists have the same amount of options, it looks fine.

I tried a second attempt by adding an optionCount value directly to my section object like so:

          :for="(section, index) in $sections"
          :ref="'section' + $index"
          :y="$index * ($section.optionCount) * 140"

Same result. My expectation is that the y value would change based on the individual section but it doesn’t seem to be working that way. Wondering if this is a bug or if there is some other way to achieve this?

Thanks in advance!

3

Resolved this in the Discord :+1:

1 Like