Bug: v-if conditional questions do not work
andreasotto opened this issue · 5 comments
Describe the bug
Conditional questions do not work (causing javascript compile error in false-situation.
TypeError: Cannot read properties of undefined (reading 'indexOf')
in the computed questionModels getter method in this part of the code:
if (children) {
children
.filter(function (q) { return q.type && q.type.name.indexOf('Question') !== -1; })
.forEach(function (q) {
The filter statement is the problem in a v-if="false"-condition.
To Reproduce
<template>
<flow-form>
<question id="one" type="number" title="Enter a number" v-model="form.number"></question>
<question id="two" v-if="form.number !== 1" type="sectionbreak" title="Wrong number"></question>
</flow-form>
</template>
Expected behavior
No errors
Screenshots
Desktop (please complete the following information):
- vue 3.2.47
- vite 3
Additional context
The questions with v-if conditions work fine as long as the condition is true.
As soon as the condition is false the error occurs.
This means that the function cannot be used at all at the moment.
If a small bounty is of interest, I'm happy to oblige.
Any help would be greatly appreciated.
I got to play around with this for quite some time and the issue comes from how question slots are processed.
vue-flow-form/components/FlowForm.vue
This is precisely where the problem the coming from, as mentioned by @andreasotto.
Logging q shows this:
One could see that q has a property children, an array whose element(s) satisfies the requirement for the filter operation to run successfully.
Let's implement this:
The above edit appears to fix the problem. I acknowledge that it is not the best solution, however, it points out where the problem is coming from and a walkaround.
Unfortunately, it looks like the project is no longer alive...?
That would hurt! It has a lot to offer.
Yes, it is by far the best Vue forms library I have found after extensive research and several tests.