使用场景:需求中需要有一个表单,和两个按钮,vant中的按钮如果在表单内部,就会默认执行submit操作,这时如果另一个按钮想执行别的事情,那就要进行一些操作了,
可以把按钮放在表单外面,然后按钮的click事件执行以下:this.$refs.checkform.submit(),这样按钮就可以执行form的submit操作了
<template>
<div class="result">
<van-form ref="checkfrom" alidate-first @submit="submit">
<van-field
readonly
v-model="name"
name="name"
label="姓名"
/>
<van-field
readonly
v-model="idNumber"
name="idNum"
label="身份证号码"
/>
<van-field
readonly
v-model="phoneNumber"
name="phone"
label="手机号"
/>
</van-form>
<button type="submit" @click="send">外部提交按钮</button>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
submit(){
//提交事件的逻辑
},
send(){
this.$refs.checkform.submit();
},
}
}
</script>
<style>
</style>
参考博文:https://blog.csdn.net/weixin_42398301/article/details/107183925