Bug: v-if conditional questions do not work

[andreasotto]

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.

[trevour66]

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.

[andreasotto]

Unfortunately, it looks like the project is no longer alive...?

[trevour66]

That would hurt! It has a lot to offer.

[andreasotto]

Yes, it is by far the best Vue forms library I have found after extensive research and several tests.

[spinn]

This should now be fixed with the following commit:

https://github.com/ditdot-dev/vue-flow-form/commit/f2f20f63ee43309ea100d6ca342de4850b9c820a

We'll also be publishing the new version to npm soon.