vue.js - How to submit a form from another component outside of the form container Vue

Question

I have a form on my page which I wish to trigger the submit from another button outside of the form how can I do this?

question from:https://stackoverflow.com/questions/66067397/how-to-submit-a-form-from-another-component-outside-of-the-form-container-vue

Answer 1

You have to add a ref to the HTML form

<form ref="form">
  <input name="field" v-model="value">
</form>

Then inside your methods you can use the reference to submit the form

methods: {
  send: function(){
    this.$refs.form.submit()
  }
}

and you can call the send method wherever your want.

You can learn more about ref attribute here

https://v3.vuejs.org/guide/component-template-refs.html