I'm currently facing an issue with a button that isn't functioning as expected in the screenshot provided. I'm hopeful that someone can assist me with this.
The button itself is not clickable, but I am able to submit the data by pressing Enter. When inspecting, an error message 'Cannot read properties of undefined (reading 'forEach')' is displayed. The code snippets related to this issue are shown below, particularly at line 255:
getData() {
const data = {
questions: [],
answers: []
}
this.questions.forEach(question => {
if (question.title) {
let answer = question.answer
if (Array.isArray(answer)) {
answer = answer.join(', ')
}
data.questions.push(question.title)
data.answers.push(answer)
}
})
return data
}
and on line 220:
onSendData(questionList) {
// Set `submitted` to true so the form knows not to allow back/forward
// navigation anymore.
const QuestionsArray = []
questionList.forEach(question => {
QuestionsArray.push(question.answer)
})
this.$refs.flowform.submitted = true
this.submitted = false
The code snippet for the non-functional button is as follows:
<template v-slot:completeButton>
<div class="f-submit" v-if="!submitted">
<button class="o-btn-action"
ref="button"
type="submit"
href="#"
v-on:click="onSendData(questionList)"
aria-label="Press to submit">
<span>{{ language.submitText }}</span>
</button>
<a class="f-enter-desc"
href="#"
v-on:click="onSendData(questionList)"
v-html="language.formatString(language.pressEnter)">
</a>
</div>
<p class="text-success" v-if="submitted">Submitted successfully.</p>
</template>
</flow-form>
Interestingly, this issue appears only when integrating this Vue repository with another one within the same stack. When deployed independently, it functions correctly!
For the full code reference, please see below:
<!-- Your custom code goes here -->