FormKitSchema missing to set instanceScopes when schema changed

[haan123]

Reproduction

https://formkit.link/26044964938a01897a2ff6355c180b53

Describe the bug

I have a plugin to translate the labels and placeholders, but when the schema is updated, it was not called then the labels and placeholders are empty, refer to the reproduction link for details.

I investigated in the packages/vue/src/FormKitSchema.ts, you are watching the props.schema, but in the watching's handler, you don't set the instanceScopes to the new instanceKey

Please check it to see if it's a bug, if it is, I can create a PR to fix this issue if needed.

Thanks!

Environment

• OS: Mac OS
• Browser chrome
• Version 1.0.0-beta.15

[haan123]

@justin-schroeder sorry to bother you but this is quite urgent for my project, could you take a look at this issue?
Do we have any workaround in the meantime?
Thank you!

[justin-schroeder]

Perhaps there is a bug here, will need further investigation — however, you really shouldn't need to modify the schema hardly ever. That watcher is in there as a concession that for some applications it may be useful to modify the schema, but you do take a pretty sizable performance hit to do so. As a workaround consider iterating over data and pushing onto that data instead.

[haan123]

@justin-schroeder how to deal with a dynamic schema like adding more fields to a group? E.g:

// Add this field to the form in runtime
{
  $cmp: "CustomField",
  props: {
	name: "test",
	type: "CCustomCheckbox",
	label: "test",
  },
}

[fenilli]

Have a component that gets fields as an array that will render your fields at runtime, so your schema won't get changed.

[haan123]

@GustavoFenilli thanks for your suggestion!

Could you provide some sample code?

Sure, we can loop through the fields if the schema is simple with 1 level, but if it has nested group or list, how to render the nested schema, and how do we handle the add new group to the nested list or new field to the nested group?

Recently, this is my main concern about the schema approach of this library

Thanks!

[quanghm27]

@haan123

• for add/remove an input in runtime, did you try to add if property?

// Add this field to the form in runtime
{
  $cmp: "CustomField",
  props: {
	name: "test",
	type: "CCustomCheckbox",
	label: "test",
	if: "true",
  },
}

• for nested value, we can use dot notation get('nodeName.someProp.someProp').