I am having an issue with a fill in the blank question. I need to emit a signal back to the parent component each time an input is correct, so that when all inputs are correct, I can display a success message.
My approach was to use a simple counter to increment by one each time the $emit function is called in the parent. However, I keep running into an infinite loop on the last try and I can't figure out what I'm doing wrong. I have tried to simplify my code as much as possible to highlight the relevant parts for you to review. Could it be something related to how the parent component handles the loops of the question?
Any help or guidance would be greatly appreciated.
Parent Component
The parent component receives a JSON string like "There are *_* letters in the *_* alphabet" and splits it into spans for the text and inputs for the blanks, then reassembles it. The answers in this case would be 26 and English.
The problematic part in the parent component is the function questionSuccess()
<template>
<div class="interactive interactive-vue-question interactive-vue-question-iv">
<component
:is="buildQuestion(index)"
v-for="(item, index) in questionParts"
ref="ivWrap"
:key="index"
:question-props="item.includes('*_*') ? matchedOptions[index] : item"
@success="questionSuccess"
/>
</div>
</template>
...
... (rest of the unchanged content)
...
Input Component
Each input in the sub-component is validated independently. When each input is correct, I want to emit a 'success' signal to the parent component. However, I end up getting stuck in an infinite loop when the last correct input is reached.
I trigger the 'success' event after validating if the input is correct
<template>
<div class="iv-input-wrap" :class="[{'is-error': isError, 'is-correct': isCorrect}]">
<input
ref="iv"
v-model="userInput"
type="text"
class="iv-input"
:class="[{'is-correct': isCorrect, 'is-error': isError}]"
:disabled="isCorrect"
>
</div>
</template>
...
... (rest of the unchanged content)
...