[英]Vuejs - How to submit data from two component
我有 2 个表单组件,我想什么时候点击保存,然后 form1 和 form2 的数据将在一个请求中提交到服务器。 谢谢!
我的代码:
<template>
<div>
<form1></form1>
<form2></form2>
<button type="button" @click="saveData()">Save</button>
</div>
</template>
<script>
export default {
methods: {
saveData() {
//post data form1 and form2 to server
}
}
}
</script>
未经测试,但像这样的事情应该可以解决问题
form1 和 form2 作为单独文件中的模板以避免混乱,数据属性是该特定区域的表单数据的容器,该特定区域绑定到使用 v-model 指令的控件
<template>
<div>
<my-form1 :data="myFormData.form1Data"></my-form1>
<my-form2 :data="myFormData.form2Data"></my-form2>
<button type="button" @click="saveData()">Save</button>
</div>
</template>
<script>
import MyForm1 from 'MyForm1';
import MyForm2 from 'MyForm2';
export default {
components: {
MyForm1,
MyForm2
},
data () {
return {
myFormData: {
form1Data: {
prop: "my-prop-value":
,
form2Data: {
prop: "my-other-prop-value":
} }
},
};
},
methods: {
saveData() {
//send myFormData here
}
}
}
</script>
示例 form1 模板:
<template>
<div>
<textarea v-model="data.prop" placeholder="write something.."></textarea>
</div>
</template>
<script>
export default {
props: {
data: Object
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.