Multiple forms with one submit() method by Vue

Question

I have a few forms. Every of them have the same logic (validation, sending...) so, I want to create one method to control actions on my forms. For now my code is redundancy, because I have the same methods onSubmit() on every .vue file.

my HTML:

<div id="app">
    <myform-one></myform-one>
    <myform-two></myform-two>
</div>

my JavaScript (main.js - entry file in webpack):

import Vue from 'vue';
import Myform1 from './myform1.vue';
import Myform2 from './myform2.vue';

new Vue({
    el: '#app',
    components: {
        myformOne: Myform1,
        myformTwo: Myform2
    }
});

and VUE components files:

myform1.vue:

<template>
    <div>
        <form @submit.prevent="onSubmit">
            <input type="text" v-model="fields.fname11" />
            <input type="text" v-model="fields.fname12" />
            <button type="submit">submit</button>
        </form>
    </div>
</template>

<script>
    let formfields = {
        fname11: '',
        fname12: ''
    };

    export default {
        data() {
            return {
                fields: formfields
            }
        },

        methods: {
            onSubmit() {
                // code responsible for reading, validating and sending data here
                // ...
                console.log(this.fields);
            }
        },
    }
</script>

and myform2.vue:

<template>
    <div>
        <form @submit.prevent="onSubmit">
            <input type="text" v-model="fields.fname21" />
            <input type="text" v-model="fields.fname22" />
            <input type="text" v-model="fields.fname23" />
            <button type="submit">submit</button>
        </form>
    </div>
</template>

<script>
    let formfields = {
        fname21: '',
        fname22: '',
        fname23: '',
    };

    export default {
        data() {
            return {
                fields: formfields
            }
        },

        methods: {
            onSubmit() {
                // code responsible for reading, validating and sending data here
                // ...
                console.log(this.fields);
            }
        },
    }
</script>

How can I create and use one, common method submitForm()? And where its code should be (good practice)?

Answer 1

Vue3 (with Quasar for me but I'm sure it would work for any framework):

Say you have a parent which contains a number of forms <Forms />:

First create a composable function like so useForms.js:

import { ref } from 'vue'

const forms = ref([])

export function useForms(){
  
  const checkForms = () => {
    forms.value.forEach((form) => form.validate()
  }  

  const addFormToFormsArray = (form) => {
    forms.value.push(form)
  }

  return { forms, addFormToFormsArray, checkForms }
}

Then import it into <Forms />:

<template>
  <Form />
  <Form />
  <Form />
  <button @click="checkForms">Check Form</button>
</template>

<script setup>
import { useForms } from '../useForms';

const { checkForms } = useForms()
</script>

Finally, inside the <Form />:

<template>
  <form ref="form">
    .../stuff
  </form>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useForms } from '../useForms';

const form = ref(null)

onMounted(() => {
  addFormToFormsArray(form.value)
})

const { checkForms, addFormToFormsArray } = useForms()
</script>

When performing the check function in the parent, it should go through each form and check for any issues.