Form unmounting causes data objects to be cleared

[twitwi]

Describe the bug
When a form gets unmounted (in my original encounter due to routing and with a schema, in the below example, with a v-if and no schema), the data to which it is bound with v-model get cleared.

To Reproduce

    <FormulateForm v-if="here" v-model="testDB">
      <FormulateInput type="text" name="id"></FormulateInput>
    </FormulateForm>
    <button @click="here = !here">is {{here}}</button>
    {{JSON.stringify(testDB, null, 2)}}
...
  data: () => ({
    testDB: {},
    here: true,
  })

Reproduction
Here is a codepen with the above form
https://codepen.io/twitwitwi/pen/oNLgVwB

Expected behavior
Filled data should be preserved when the forms get unmounted.

[justin-schroeder]

That behavior is intentional, but if you're using Formulate >= 2.4.4 you can add :keep-model-data="true" to your form or input to preserve data on unmount 👍

Check it out:

https://codepen.io/jpschroeder/pen/oNLgVeB

[twitwi]

Ok thanks, that's great.

For (my) future reference, I share a code pen that adds this property both on the form and on the nested (repeated) inputs, with a schema.
https://codepen.io/twitwitwi/pen/YzWPgEx

[twitwi]

Sorry to bother you again.
I couldn't manage to have it work with nested repetitions, here is my tentative code
https://codepen.io/twitwitwi/pen/KKMwEoL
I'm not sure what I'm doing wrong.

[andrew-boyd]

@justin-schroeder Playing with this and it seems like an issue. I've created a reproduction with both repeatable and non-repeatable form elements here. Both are generated from a schema.

https://codepen.io/boyd/pen/KKMpLWm

Of note, if you add a repeatable element to the second form (the outer-most repeater) the second object is preserved (it's not reset to a single object in the array) but the contents are indeed not preserved.

[justin-schroeder]

Yeah, keep-model-data is not yet supported on group types. It gets reeeeeally complicated with nesting. For example you make keep-model-data="true" on a child but the parent group doesn't have it, or if you use conditional fields to make a conditional repeated field keep it's model data in some instances but not in others based on the value of an adjacent field — which is based on the index. If we solve it, we have to comprehensively solve it. For now it might be worth just noting in the docs that keep-model-data is not supported for groups.

[andrew-boyd]

Makes sense. Let's put a warning in the docs for now at least.

@twitwi thanks for bringing attention to this. Sorry we cannot support it at this immediate time.

[twitwi]

Ok thanks for having taken the time to have a look. I understand it requires more thinking given the complexity of the changes. (I closed the other issue I had opened on this subject).

[sugoidesune]

I turned the "values" into a computed property with getter and setter.
In which valuesIdentical checks if the setter actually updates any of the values, comparing it to the values in the store.
This works for my data structure but you might want to use a library.
Important to know is that it clears the data one field by one.

values: [first_name, last_name]

on unmount the data in values will be updated with [last_name]
and then again with an empty []

My code:

function valuesIdentical(previous, current){

  return Object.keys(current).reduce((change_detected,current_key)=>{
    return change_detected && previous[current_key] == current[current_key]
  },true)
}

export default {
computed:
    values: {
        set(values){
          if(valuesIdentical(this.$store.state.account.profile, values)){return} // dynamic form calls this many times without changes
          this.$store.dispatch(`account/onProfileUpdate`, values)
        },
        get(){
          return this.$store.state.account.profile
        }
    }
}
}