Form @submit event not registering

[timmyd87]

!!! IF YOU DO NOT USE THIS ISSUES TEMPLATE, YOUR ISSUE IS LIABLE TO BEING IGNORED BY US

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [Y ] I am running the latest version
• [ Y] I checked the documentation and found no answer
• [ Y] I checked to make sure that this issue has not already been filed
• [ Y] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

In the form the correct syntax to use according to Vue is @submit.prevent="onSubmit" (or similar) in the

tag which is inline with Vue documentation - https://vuejs.org/v2/guide/events.html

Current Behavior

@click listener works fine but @submit in the form does not register or work and nothing is logged in the console.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Create a simple form with a submit action
2. Add @submit.prevent='myAction' in to the form tag for submission
3. Nothing

THEN

4. Replace @submit in the form tag with @click.prevent='myAction' in the submit button and watch that form submit.

Please include any relevant log snippets or files here.

[cristijora]

Hey @timmyd87 Usually a form requres a button with type="submit" Have you tried having such a button in your form ?

If you're using the base-button component you can make it as a submit button like this <base-button native-type="submit">

[cristijora]

Here's a more complete example of the login form form login page which works. The main part is the native-type="submit" button which is required for the form to fire the submit event.

<form role="form" @submit.prevent="login">
                <base-input alternative
                            class="mb-3"
                            prepend-icon="ni ni-email-83"
                            placeholder="Email"
                            v-model="model.email">
                </base-input>

                <base-input alternative
                            class="mb-3"
                            prepend-icon="ni ni-lock-circle-open"
                            type="password"
                            placeholder="Password"
                            v-model="model.password">
                </base-input>

                <base-checkbox v-model="model.rememberMe">Remember me</base-checkbox>
                <div class="text-center">
                  <base-button type="primary" native-type="submit" class="my-4">Sign in</base-button>
                </div>
              </form>

    methods: {
      login() {
        console.log('Form submit')
      }
    }

[ssdwho]

Here's a more complete example of the login form form login page which works. The main part is the native-type="submit" button which is required for the form to fire the submit event.

<form role="form" @submit.prevent="login">
                <base-input alternative
                            class="mb-3"
                            prepend-icon="ni ni-email-83"
                            placeholder="Email"
                            v-model="model.email">
                </base-input>

                <base-input alternative
                            class="mb-3"
                            prepend-icon="ni ni-lock-circle-open"
                            type="password"
                            placeholder="Password"
                            v-model="model.password">
                </base-input>

                <base-checkbox v-model="model.rememberMe">Remember me</base-checkbox>
                <div class="text-center">
                  <base-button type="primary" native-type="submit" class="my-4">Sign in</base-button>
                </div>
              </form>

    methods: {
      login() {
        console.log('Form submit')
      }
    }

I wish you try that:

methods: {
      login() {
        console.log(this.model.email)
      }
    }

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'model' of undefined"

🤔

[sajadevo]

Hi there,

We've updated the product to v3 which comes with a new look and a new base structure for more reusable components.

All the best Sajad

Web Developer @ Creative-Tim.com