Submit a form with javascript doesn't trigger event modifier.

Vue.js version

1.0.23

Reproduction Link

http://jsbin.com/pevimajuro/edit?html,js,output

Steps to reproduce

Submit a form with javascript document.forms[0].submit(); doesn’t trigger event modifier v-on:submit.prevent

What is actually happening?

The event modifier is not triggered. The default event is.

Is this a bug ?

Some web extension auto login after filling form, but don’t seems to work with a vuejs form.

[GarethTIGFreight]

I had a scenario where i wanted to submit the form outside of the form and calling this.$refs.form.submit() wouldn’t fire my saveData() function so this is my workaround…

Form HTML

<form ref="form" v-on:submit.prevent='saveData()' v-on:reset.prevent>
    <!-- form inputs --->
</form>
<button @click="saveData()">Save</button>

Vue component method

saveData: function () {
    // Manually trigger validation
    if (!this.$refs.form.checkValidity()) {
        // Try focus on the error 
        this.$refs.form.reportValidity()
        return
    }

    // Actually save code
}

Hopefully this helps someone. Still can be submitted via $refs.form.submit() but I can still manually trigger the Validity (although I’m not sure if reportValidity() is reliable).

[simplesmiler]

@flo-sch adding plain listener won’t help, the problem is that programmatic form.submit() does not fire event at all.