vant表單中的提交中的一些坑

使用vant表單時，當<van-form>標簽中有@submit時，就代表了表單的提交事件

在v2.0+版本中表單中所有的 van-button 按鈕都算是提交表單，原因是瀏覽器中 button 標簽 type 屬性的默認值為submit，導致觸發表單提交，但是在v3.0+版本中已經修改。所以如果你有標簽中有@submit，而van-button中又定義了點擊事件，那么此時表單會提交2次！

比如

<template>
    <van-form @submit="onSubmit">
　　　　<van-field v-model="username" name="用戶名" label="用戶名" placeholder="用戶名" 
　　　　　　:rules="[{ required: true, message: '請填寫用戶名' }]" 
　　　　/> 
　　　　<van-field v-model="password" type="password" name="密碼" label="密碼" placeholder="密碼" 
　　　　　　:rules="[{ required: true, message: '請填寫密碼' }]" 
　　　　/> 
　　　　<div style="margin: 16px;">
　　　　　　<van-button round block type="info" native-type="submit" @click="onSubmit">提交</van-button>
　　　　</div>
　　</van-form>
</template>

<script>
　　export default { 
　　　　data() { 
　　　　　　return { 
　　　　　　　　username: '', 
　　　　　　　　password: '', 
　　　　　　}; 
　　　　}, 
　　　　methods: { 
　　　　　　onSubmit(values) { 
　　　　　　　　console.log('submit', values); 
　　　　　　},
　　　　}, 
　　};
</script>

native-type="submit" 屬性的作用就跟 @click="onSubmit" 的作用一樣，所以這里會提交兩次表單！
解決辦法：
　　就是兩者留其一即可
但是有一點，如果是依靠 native-type="submit" 屬性進行表單提交的話，定義在回調函數中的一些提示無法觸發。這時我把 native-type="submit" 改為 native-type="button"，使用原本的 @click 方法觸發調用，解決