ejucovy
commented
1 year ago @WebMedic-X I had the same problem -- it turns out the documented example is incorrect.
Each <question> needs to have a unique id= in addition to the documented props.
I also found that, sometimes, having an HTML comment node causes the vue-flow-form code to break with an Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')
Here's a working version of their example -- note that it is identical to the documented code at https://www.ditdot.hr/en/docs/vue-flow-form-guide#question-components except for the addition of the id= attributes and removal of the comment node:
<template>
<flow-form>
<question id="name" type="text" title="Hello, what is your name?" v-model="name" ></question>
<question id="age" type="number" title="What is your age?" v-model="age"></question>
<question id="sorry" v-if="age < 18" type="sectionbreak" title="Sorry, you are under 18"></question>
<question id="welcome" v-else type="sectionbreak" :title="'Nice to meet you, ' + name + '. Welcome to our site!'"></question>
</flow-form>
</template>
<script>
import FlowForm from '../../src/components/FlowForm.vue'
import Question from '../../src/components/Question.vue'
// If using the npm package, use the following line instead of the ones above.
// import { FlowForm, Question } from '@ditdot-dev/vue-flow-form'
export default {
name: 'example',
components: {
FlowForm,
Question
},
data() {
return {
name: '',
age: ''
}
}
}
</script>
Describe the bug When using the question component and having more than one question, the first page is blank.
In other words, the first question is not working and we can only the see the second question when navigating to next page from the bottom navigation.
To Reproduce Steps to reproduce the behavior: Use the question component example from here: https://github.com/ditdot-dev/vue-flow-form/issues/194#issuecomment-841332604
Expected behavior First question to show properly.
Another issue:
When going to next question, the second question is then repeated twice: