Amplify UI - Vue 2 - amplify-sign-up doesn't fire (handleSubmit) Event

[cryptomatictrader]

JavaScript Framework

Vue

Amplify APIs

Authentication

Amplify Categories

auth

Version

@aws-amplify/ui-components: ^1.2.0 => 1.2.0 @aws-amplify/ui-vue: ^1.0.7 => 1.0.7

Describe the bug

I've attempted multiple variants to access handleSubmit but none of them seems to work.

<amplify-sign-up handleSubmit=consoleLog></amplify-sign-up>
<amplify-sign-up :handleSubmit=consoleLog></amplify-sign-up>
<amplify-sign-up @handleSubmit=consoleLog></amplify-sign-up>
consoleLog(event) { console.log(event); },

I've also added the put consoleLog in "" and still they don't work.

Expected behavior

consoleLog should get fired up.

Reproduction steps

1. Use Vue's amplify-authenticator and amplify-sign-up with handleSubmit property
2. The target handler won't get invoked.

[sammartinez]

Can you provide your package.json along with your environment settings?

Please use the follow command:

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

Thanks ahead of time!

[cryptomatictrader]

Here you go:

npx: installed 1 in 1.713s

  System:
    OS: macOS 11.2.3
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 597.41 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.21.0 - ~/.nvm/versions/node/v10.21.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.10 - ~/projects/ravenpod-web/node_modules/.bin/npm
  Browsers:
    Chrome: 89.0.4389.128
    Safari: 14.0.3
  npmPackages:
    @aws-amplify/ui-components: ^1.2.0 => 1.2.0 
    @aws-amplify/ui-vue: ^1.0.7 => 1.0.7 
    @mdi/font: ^5.6.55 => 5.6.55 
    @vue/cli-plugin-babel: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-eslint: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-router: ~4.4.0 => 4.4.6 
    @vue/cli-service: ~4.4.0 => 4.4.6 
    amplify-ui-components-loader:  undefined ()
    apexcharts: ^3.26.0 => 3.26.0 
    array-normalize: ^2.0.0 => 2.0.0 
    aws-amplify: ^3.3.26 => 3.3.26 
    axios: ^0.21.1 => 0.21.1 
    babel-eslint: ^10.1.0 => 10.1.0 
    color: ^3.1.3 => 3.1.3 
    color-scheme: ^1.0.1 => 1.0.1 
    core-js: ^3.6.5 => 3.6.5 
    dev:  1.0.0 
    eslint: ^6.7.2 => 6.8.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    example:  0.1.0 
    faker: ^5.1.0 => 5.1.0 
    humanize-duration: ^3.25.1 => 3.25.1 
    javascript-color-gradient: ^1.3.2 => 1.3.2 
    jquery: ^3.5.1 => 3.5.1 
    moment-timezone: ^0.5.31 => 0.5.31 
    npm: ^6.14.10 => 6.14.10 
    npm-cli-docs:  0.1.0 
    numeral: ^2.0.6 => 2.0.6 
    raw-loader: ^4.0.2 => 4.0.2 
    sass: ^1.26.11 => 1.26.11 
    sass-loader: ^8.0.0 => 8.0.2 
    simple-syntax-highlighter: ^1.4.4 => 1.4.4 
    url-template: ^2.0.8 => 2.0.8 
    uuid-random: ^1.3.2 => 1.3.2 
    uuid-random-benchmark:  1.0.0 
    vue: ^2.6.12 => 2.6.12 
    vue-apexcharts: ^1.6.0 => 1.6.0 
    vue-cli-plugin-vuetify: ~2.0.7 => 2.0.7 
    vue-d3-network: ravengit/vue-d3-network => 0.1.28 
    vue-json-pretty: ^1.7.1 => 1.7.1 
    vue-read-more-smooth: ^0.1.8 => 0.1.8 
    vue-router: ^3.4.5 => 3.4.5 
    vue-sticky-directive: 0.0.10 => 0.0.10 
    vue-template-compiler: ^2.6.12 => 2.6.12 
    vuetify: ^2.3.10 => 2.3.10 
    vuetify-loader: ^1.3.0 => 1.6.0 
    vuex: ^3.5.1 => 3.5.1 
    vuex-persistedstate: ^4.0.0-beta.1 => 4.0.0-beta.1 
  npmGlobalPackages:
    @aws-amplify/cli: 4.46.1
    @vue/cli: 4.4.6
    node-gyp: 7.1.2
    npm: 6.14.6

[hkjpotato]

@calvinchso can you try to use the following syntax

:handleSubmit.prop="consoleLog"

Basically, .prop is a modifier to bind it as a property of the dom/component, instead of as an attribute(https://vuejs.org/v2/api/#v-bind). This way the web-component amplify-sign-up can recognize it.

[wlee221]

Closing as per @hkjpotato's suggestion. Please let us know if you're still experiencing this and we can reopen this issue. Thanks!

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.