vue.js - vue js中的aws cognito UI表单字段问题

Question

我在我的 vue js 应用程序中使用 AWS cognito 和放大。使用预定义的字段一切正常。

我在 AWS 用户池属性部分添加了自定义字段。那些新添加的字段不会反映在 UI 中。

这是我用于放大配置和自定义字段的代码。

HTML 代码：

<amplify-authenticator>
     <amplify-sign-up
       slot="sign-up"
       header-text="My Project Sign-Up"
       submit-button-text="Register"
       :formFields="formFields"
     ></amplify-sign-up>
</amplify-authenticator>

自定义字段 JSON

formFields: [
        { type: 'username' },
        { type: 'password' },
        { type: 'email', inputProps: { required: true, autocomplete: 'username' } },
        { type: 'phone_number' },
        { type: 'custom:name' },
      ]

结果表格

自定义字段没有出现在表单中。有人可以帮我解决这个问题吗？

Answer 1

该问题似乎与 Stencil 有关。请参阅此讨论。

建议的解决方案是更改formFields为formFields.prop.

例如

<amplify-authenticator>
     <amplify-sign-up
       slot="sign-up"
       header-text="My Project Sign-Up"
       submit-button-text="Register"
       :formFields.prop="formFields"
     ></amplify-sign-up>
</amplify-authenticator>

这对我使用 Vue 2 有效。