通过Vue使用一个submit()方法创建多个表单

jv2fixgn 于 2022-12-19 发布在 Vue.js

关注(0)|答案(3)|浏览(231)

我有几个表单。每个表单都有相同的逻辑（验证、发送...），所以我想创建一个方法来控制表单上的操作。现在我的代码是冗余的，因为我在每个**.vue**文件上都有相同的方法onSubmit()。
我的HTML：

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

我的JavaScript（main.js-webpack中的条目文件）：

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

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

和VUE组件文件：

我的表单1.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>

以及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>

我如何创建和使用一个公共方法submitForm()？它的代码应该在哪里（好的实践）？

vue.js

来源：https://stackoverflow.com/questions/52887704/multiple-forms-with-one-submit-method-by-vue

3条答案

按热度按时间

csga3l581#

创建包含以下逻辑的单独文件：

// submitForm.js
export default function (fields) {
   // code responsible for reading, validating and sending data here
   // ...
}

然后在组件内部使用该逻辑

import submitForm from "../services/submitForm.js"
...
methods: {
  onSubmit() {
    submitForm(this.fields)
  }
}

赞(0）回复(0）举报 2022-12-19

djmepvbi2#

Vue3（我使用Quasar，但我相信它适用于任何框架）：
假设你有一个包含许多表单<Forms />的父表单：
首先创建一个可组合函数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 }
}

然后导入到<Forms />中：

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

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

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

最后，在<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>

在父级中执行检查功能时，它应该遍历每个表单并检查是否存在任何问题。

赞(0）回复(0）举报 2022-12-19

fslejnso3#

有一些选项，我最喜欢的是创建一个mixin vue docs mixins

export const form_functionality = {
  methods: {
     on_submit() {
      //logic of submit
     },
     //here we can have other reusable methods
  }
}

然后在组件中使用该mixin，如下所示：

import { form_functionality } from 'path_of_mixin'
export default {
  mixins: [form_functionality]
}

最后，mixin所拥有的（创建的、方法、数据等）将被合并到使用该mixin的组件中。
因此，实际上您可以像this.on_submit()一样访问mixin方法

赞(0）回复(0）举报 2022-12-19

我来回答

通过Vue使用一个submit()方法创建多个表单

3条答案

相关问题

热门标签

最新问答