Несколько форм с одним методом submit () от Vue
У меня есть несколько форм. У каждого из них одинаковая логика (проверка, отправка ...), поэтому я хочу создать один метод для управления действиями в моих формах. На данный момент мой код является избыточным, потому что у меня одни и те же методы onSubmit() для каждого файла .vue.
мой HTML:
<div id = "app">
<myform-one></myform-one>
<myform-two></myform-two>
</div>
мой JavaScript (main.js - входной файл в веб-пакете):
import Vue from 'vue';
import Myform1 from './myform1.vue';
import Myform2 from './myform2.vue';
new Vue({
el: '#app',
components: {
myformOne: Myform1,
myformTwo: Myform2
}
});
и файлы компонентов VUE:
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.info(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.info(this.fields);
}
},
}
</script>
Как я могу создать и использовать один общий метод submitForm()? А где должен быть его код (хорошая практика)?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
There are some options. My favorite is creating a mixin vue docs mixins
export const form_functionality = {
methods: {
on_submit() {
//logic of submit
},
//here we can have other reusable methods
}
}
Затем в ваших компонентах используйте этот миксин следующим образом:
import { form_functionality } from 'path_of_mixin'
export default {
mixins: [form_functionality]
}
В конце концов, какие миксины (созданные, методы, данные и т. д.) Будут объединены с компонентом. который использует этот миксин.
Итак, практически вы можете получить доступ к методу миксина, например this.on_submit().
выглядит очень хорошо, но как мне ввести данные полей формы (переменная formfields)?
Я не могу полностью понять этот случай, но вы можете отправить поля формы для отправки метода. Нравится this.on_submit(this.formFields)
Создайте отдельный файл, содержащий логику:
// 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)
}
}
Вам следует подавать в суд на миксины vuejs.org/v2/guide/mixins.html