diff --git a/src/App.vue b/src/App.vue index 167e9aa..1abf75a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -15,46 +15,38 @@ const castNumber = (node: FormKitNode) => { onMounted(() => { - const agreeNode = getNode('agreeNodeId') - Object.assign(window, { agreeNode }) - console.debug('[onMounted]', `agreeNode :>> `, agreeNode); - - const nameNode = agreeNode?.context?.node.at('attributes.name') + const nameNode = getNode('nameNodeId') + Object.assign(window, { nameNode }) console.debug('[onMounted]', `nameNode :>> `, nameNode); - agreeNode!.on('commit', ({ payload }) => { - console.debug('[agreeNode] [on commit]', `payload :>> `, payload); - let newValue = (nameNode?.value as string)?.replace(' 👍', '')?.replace(' 👎', '') - nameNode!.input(`${newValue} ${payload ? '👍' : '👎'}`) + + const schemaGroupInput = nameNode!.root.at('schemaGroup.input') + console.debug('[onMounted]', `schemaGroupInput :>> `, schemaGroupInput); + nameNode!.on('commit', ({ payload }) => { + console.debug('[nameNode] [on commit]', `payload :>> `, payload); + schemaGroupInput!.input(`姓名:${payload}`) }) }) -const addressSchema: FormKitSchemaDefinition = [ +const SCHEMA: FormKitSchemaDefinition = [ + { + $el: 'h1', + children: 'JSON Schema Form', + attrs: { + class: 'font-bold text-2xl mb-4', + 'data-foo': 'bar', + }, + }, { $formkit: 'group', - name: 'address', + name: 'schemaGroup', children: [ { $formkit: 'text', - name: 'street', - label: '街道地址', + label: 'JSON Schema’ed Input', + name: 'input', validation: 'required', - validationLabel: '街道地址' - }, - { - $formkit: 'text', - name: 'city', - label: '城市', - validation: 'required', - validationLabel: '城市' - }, - { - $formkit: 'text', - name: 'zipCode', - label: '邮政编码', - validation: 'required|number|length:6', - validationLabel: '邮政编码', - errors: ['显式错误'] // 显式设置的错误是非阻塞的,这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。 - // :errors="errors" + validationLabel: 'input字段', + errors: ['显式设置的错误是非阻塞的,这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。'] } ] } @@ -94,15 +86,10 @@ const addressSchema: FormKitSchemaDefinition = [ -
- 输入的姓名必须包含 '测试' 字符串。 -
- +