vant的van-form组件内部button触发submit事件问题
form表单发送手机验证码时触发表单submit事件,直接加 native-type=“button”,可以解决不触发表单事件
<van-button block type="info" native-type="button">发送验证码</van-button>
vant的van-form组件外部button触发submit事件问题
<template>
<div class="result">
<van-form ref="formData" 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(values){
//提交事件的逻辑
console.log(values) //values为表单中van-field的值
},
send(){
this.$refs.formData.submit();
},
}
}
</script>
<style>
</style>