fix(vue): view should updated when schema changed (#2354)

alibaba · Oct 30, 2021 · 4b3d092 · 4b3d092
1 parent a99feb4
commit 4b3d092
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 1 deletion.
diff --git a/packages/vue/src/__tests__/schema.json.spec.ts b/packages/vue/src/__tests__/schema.json.spec.ts
@@ -966,3 +966,64 @@ describe('expression', () => {
     wrapper.destroy()
   })
 })
+
+describe('schema controlled', () => {
+  test('view updated with schema', async () => {
+    const form = createForm({})
+    const { SchemaField } = createSchemaField({
+      components: {
+        Input,
+        Input2,
+      },
+    })
+    const component = defineComponent({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: {
+            type: 'object',
+            properties: {
+              input: {
+                type: 'string',
+                'x-component': 'Input',
+              },
+              input2: {
+                type: 'string',
+                'x-component': 'Input2',
+              },
+            },
+          },
+        }
+      },
+      methods: {
+        changeSchema() {
+          this.form = createForm()
+          this.schema = {
+            type: 'object',
+            properties: {
+              input2: {
+                type: 'string',
+                'x-component': 'Input2',
+              },
+            },
+          }
+        },
+      },
+      template: `<FormProvider :form="form">
+          <SchemaField
+            :schema="schema"
+          />
+          <button @click="changeSchema()">changeSchema</button>
+        </FormProvider>`,
+    })
+    const wrapper = mount(component, { attachToDocument: true })
+
+    expect(wrapper.contains('.input')).toBe(true)
+    expect(wrapper.contains('.input2')).toBe(true)
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.contains('.input2')).toBe(true)
+    expect(wrapper.contains('.input')).toBe(false)
+    wrapper.destroy()
+  })
+})
diff --git a/packages/vue/src/components/RecursionField.ts b/packages/vue/src/components/RecursionField.ts
@@ -100,7 +100,7 @@ const RecursionField = observer(
               return h(
                 RecursionField,
                 {
-                  key: index,
+                  key: name,
                   attrs: {
                     schema,
                     name,