Programmatically trigger submit

[vedran-milic]

Is there a way to programmatically trigger submit event from outside the Form component?
Example:

<Form
      @submit="submitForm"
      v-slot="{ errors }"
      class="form tiny-input change-password-form"
      :initial-values="userData.data"
      ref="profileUpdateForm"
      novalidate
    >
    <div class="form-group input">
      <label class="tiny-label bg">First name</label>
      <Field
        name="first_name"
        as="input"
        type="text"
        rules="required"
        :disabled="submitting"
      />
      <span class="error-message" v-if="errors.first_name">
        {{ errors.first_name }}
      </span>
    </div>
    <div class="form-group input">
      <label class="tiny-label bg">Last name</label>
      <Field
        name="last_name"
        as="input"
        type="text"
        rules="required"
        :disabled="submitting"
      />
      <span class="error-message" v-if="errors.last_name">
        {{ errors.last_name }}
      </span>
    </div>
    <div class="form-group input">
      <label class="tiny-label bg">Email</label>
      <Field
        name="email"
        as="input"
        type="email"
        rules="required|email"
        :disabled="submitting"
      />
      <span class="error-message" v-if="errors.email">
        {{ errors.email }}
      </span>
    </div>
    <div class="form-group input">
      <label class="tiny-label bg">Username</label>
      <Field
        name="username"
        as="input"
        type="text"
        rules="required"
        :disabled="submitting"
      />
      <span class="error-message" v-if="errors.username">
        {{ errors.username }}
      </span>
    </div>
  </Form>
<!-- some more code -->
<!-- some more code -->
<!-- some more code -->
<!-- some more code -->
<template v-slot:footer>
  <div class="submit-action" v-if="hasData && editing">
    <button class="btn rounded light" @click="triggerSubmitFromHere">
      Save changes
    </button>
  </div>
</template>

Button is not "nested" inside Form tag.

[logaretm]

I moved this to the discussions section as this is not an issue, but rather a question.

To answer your question, this is not a limitation from vee-validate's side, there are multiple ways you can submit a form outside of it. Two ways that come to mind are the button element's form attribute or dispatchEvent on the form element itself which can be triggered with $refs.

[vedran-milic]

I tried triggering submit with ref attached to Form component, but that doesn't work because the ref points to Form component and not on the HTML form element - this.$refs.refName.submit() is not working in that case.
When I submit the HTML form itself it triggers the default HTML submit with query strings 'n' all.
I solved the problem temporarily with a hidden submit button which I click on programmatically and that works but it's ugly as hell.