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

Posted 2023-03-27

【中文标题】vue js中的aws cognito UI表单字段问题

【英文标题】：Issue with aws cognito UI form fields in vue js

【发布时间】：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' ,
      ]

结果表格

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

【参考方案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 有效。