Блог

Я использую AWS cognito и amplify в своем приложении vue js. С предопределенными полями все работает нормально.

Я добавил настраиваемые поля в раздел атрибутов пула пользователей AWS. Эти недавно добавленные поля не отражаются в пользовательском интерфейсе.

Вот мой код для усиления конфигурационных и пользовательских полей.

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

Форма результата

Пользовательские поля не отображаются в форме. Может ли кто-нибудь, пожалуйста, помочь мне решить эту проблему?

Проблема, по-видимому, связана с трафаретом. См. Это обсуждение.

Предлагаемое решение — изменить 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.