Essentially, I have developed a REST Api that retrieves a list of components (sections) from a CMS along with their associated data. Each section in the UI is assigned a number to indicate its position, but certain sections are excluded from counting, such as a career block section. This numbering information is passed as a prop to each rendered section using the format :number=""
In my function, it iterates through the sections and increments the number if the component is included in the allowedNumerableSections array. If the component is not in the array, it will return false and increment the decrementAmount state variable.
For example, let's assume we have 5 sections:
Section1
Section2
Section3
Section4
Section5
If Section3 is not included in the allowedNumerableSections array, then when these sections are looped out with the :number prop for each section, it would look like:
<Section1 number="1" />
<Section2 number="2" />
<Section3 number="false" />
<Section4 number="3" />
<Section5 number="4" />
Therefore, Section3 is skipped in the numbering sequence. Consequently, the UI might display /01 for Section 1 and /03 for Section 4, indicating the correct numbering order.
The issue arises when I implement logic to increment the state variable. For some reason, it loops specifically 608 times and the final numbers end up showing something like /0-201 instead of /04, or /0-204 instead of /01.
Here is an excerpt of my code:
<template>
<div class="sections">
<component
:is="getSection(section.__component)"
v-for="(section, index) in sections"
:key="index"
:section="section"
:number="getNumber(section, index)"
class="section"
/>
</div>
</template>
<script>
export default {
name: "SectionStructure",
... // Components, props, data, methods, computed properties
};
</script>
However, when I manually set decrementAmount to a specific value like this.decrementAmount = 3, it correctly loops the desired number of times, although all indexes are reduced by 3. This outcome is not ideal.
Does anyone have insights into why this continuous looping behavior occurs?