vant元件表單外部的button觸發form表單的submit事件問題

2022-06-24 10:00:39

vant元件表單外部的button觸發form表單的submit事件

有時候根據需求以及佈局需要，button按鈕需要放在form外部，但是想觸發提交事件的同時又想方便地獲取表單的值

一、給form表單新增ref屬性

<van-form ref="formData" alidate-first @submit="submit">
      <van-field
           readonly
           v-model="name"
           name="name"
           label="姓名"
       />
</van-form>

二、處理外部button

1.給button新增點選事件

<button type="submit"  @click="send">外部提交</button>

2.在點選事件內部處理邏輯

send(){
   this.$refs.formData.submit();
},

這裡的formData是form表單上的ref屬性值

然後就可以點選button時就會觸發表單的submit事件了，以後可以直接在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>

vant點選表單中普通按鈕為什麼會觸發表單提交

在表單中，除了提交按鈕外，可能還有一些其他的功能性按鈕，如傳送驗證碼按鈕。

在使用這些按鈕時，要注意將native-type設定為button，否則會觸發表單提交。

<van-button native-type="button">
  傳送驗證碼
</van-button>

這個問題的原因是瀏覽器中 button 標籤 type 屬性的預設值為submit，導致觸發表單提交。

我們會在下個大版本中將 type 的預設值調整為button來避免這個問題。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

vant元件表單外部的button觸發form表單的submit事件問題

目錄

vant元件表單外部的button觸發form表單的submit事件

一、給form表單新增ref屬性

二、處理外部button

vant點選表單中普通按鈕為什麼會觸發表單提交

熱門文章