vue js中的aws cognito UI表单字段问题答案

【问题标题】：Issue with aws cognito UI form fields in vue jsvue js中的aws cognito UI表单字段问题
【发布时间】：2022-01-10 12:16:53
【问题描述】：

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

我在 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' },
      ]

结果表格

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

【问题讨论】：

标签： vue.js amazon-cognito aws-amplify aws-amplify-vue

【解决方案1】：

该问题似乎与 Stencil 有关。见this discussion。

建议的解决方案是将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 有效。

【讨论】：