When use QOptionGroup, field is undefined in evaluatedProp function scope about quasar-ui-easy-forms HOT 6 CLOSED

@ChinuxParibus
Thanks for opening the issue.

I believe there are still problems with using numbers for the values in a QSelect or QOptionGroup.
If you change this to strings it should work.

Also please note if you use a checkbox option group that can have multiple options inside an array, you will have to check the problematicID's array if it includes your value: formData.problematicID.includes() like so.

/*schema1.js*/
const mySchema = {
  schema: [
    {
      id: 'problematicID',
      label: 'Does it work?',
      component: 'QOptionGroup',
      type: 'checkbox',
      default: () => [],
      options: [
        { label: 'Yes', value: '1' }, // see string for value '1'
        { label: 'No', value: '2' }
      ]
    },
    {
      id: 'doeswork',
      label: 'It does work :)',
      component: 'QInput',
      evaluatedProps: ['showCondition'],
      showCondition: (_, { formData }) => formData.problematicID.includes('1')
      // see string for value '1' in the showCondition

PS: you probably wanna use the dev tools to how the formData.problematicID value actually looks after checking some boxes. Just so there's no surprises.

I will look into this further, but let me know if this solves your issue.

from quasar-ui-easy-forms.

As for your other issue:

Also, if I change the order of the schemas in the array, does not make the conditional rendering, though.

I believe that perhaps the easy form is not re-rendered after making modifications to the schema prop passed. (but again, will need to double check.)
This is for performance reasons → I'll need less watchers.

There are a million ways you can work around this. One way is to provide all possible orders inside the schema from the start when the easy form is rendered, and have the fields shown or hidden via showConditions, so that it reflects your preferred order based on whatever dynamic logic you have going on.

Another way is to re-render the entire easy-form by changing a key prop you apply to the easy form tag. However, this might reset the user input, so you might need to also keep a copy of your formData in the parent component.

from quasar-ui-easy-forms.

@ChinuxParibus
Yeah basically you can do this:

<EasyForm :key="counter" />

and

return default {
  data () { return { counter: 0 } }
}

Then if you increment the counter, the form is re-loaded and therefore reset. :)

If you update the schema before you increment the counter, it gets reloaded with the new schema.

This is true for all Vue components btw, not just EasyForms. 😉

from quasar-ui-easy-forms.

I could circumvent this issue declaring the id of the field as a key, explicitly into the v-model attr.
So, partial look like this: partial: {problematicID: []}
But this should not happen since I'm separating the partial schemas of the form with unique keys.
You read it from an avocado.

from quasar-ui-easy-forms.

Another way is to re-render the entire easy-form by changing a key prop you apply to the easy
form tag. However, this might reset the user input, so you might need to also keep a copy of your
formData in the parent component.

Thanks for your kind response :)

That's exactly the behavior I'm looking for because the definition of my partial schemas have some "prelations" between them, so showCondition has to reset that partial form in particular. Maybe that's the reason why didn't throw any errors.

I'll be giving a try and I will let you know if it works.

from quasar-ui-easy-forms.

@ChinuxParibus the new version has dedicated documentation on how to reset the form!

see #43

from quasar-ui-easy-forms.