vant組件表單外部的button觸發(fā)form表單的submit事件問題
更新時間：2022年06月24日 08:57:45 作者：manda?Liu
這篇文章主要介紹了vant組件表單外部的button觸發(fā)form表單的submit事件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vant組件表單外部的button觸發(fā)form表單的submit事件
有時候根據(jù)需求以及布局需要，button按鈕需要放在form外部，但是想觸發(fā)提交事件的同時又想方便地獲取表單的值
一、給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時就會觸發(fā)表單的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點擊表單中普通按鈕為什么會觸發(fā)表單提交
在表單中，除了提交按鈕外，可能還有一些其他的功能性按鈕，如發(fā)送驗證碼按鈕。
在使用這些按鈕時，要注意將native-type設置為button，否則會觸發(fā)表單提交。
<van-button native-type="button"> ? 發(fā)送驗證碼 </van-button>
這個問題的原因是瀏覽器中 button 標簽 type 屬性的默認值為submit，導致觸發(fā)表單提交。
我們會在下個大版本中將 type 的默認值調整為button來避免這個問題。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了vue使用drag與drop實現(xiàn)拖拽的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue 父組件獲取子組件里面的data數(shù)據(jù)(實現(xiàn)步驟)
在Vue中,父組件可以通過`ref`引用子組件,并通過`$refs`屬性來訪問子組件的數(shù)據(jù),下面分步驟給大家介紹vue 父組件獲取子組件里面的data數(shù)據(jù),感興趣的朋友一起看看吧2024-06-06
本文給大家分享vue自定義組件的四種方式，通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2020-02-02
vue最強table vxe-table 虛擬滾動列表 前端導出問題分析
最近遇到個問題,后臺一次性返回2萬條列表數(shù)據(jù)并且需求要求所有數(shù)據(jù)必須全部展示,不能做假分頁,怎么操作呢,下面通過本文介紹下vue最強table vxe-table 虛擬滾動列表 前端導出問題,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了使用md5在vue中的axios請求時加密API問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue-cli自定義創(chuàng)建項目eslint依賴沖突解決方式
vue-cli是vue.js的腳手架,用于自動生成vue.js+webpack的項目模板,在創(chuàng)建項目時,如果遇到npm安裝報錯,通常是由于依賴版本沖突造成的,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
端午將至，大家都開始吃粽子了么？本文將用vite2與vue3開發(fā)出一個招財貓小游戲，在圖案不停滾動的同時選出可以轉出不同的素材最終得到粽子獎勵，康康你能用多少次才會轉出自己喜愛口味的粽子吧2022-05-05
今天小編就為大家分享一篇vue實現(xiàn)配置全局訪問路徑頭(axios)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
最近在開發(fā)自己的富文本編輯器插件，在開發(fā)中遇到了很多問題其中我覺得比較好的問題就是在你定義的插件中實現(xiàn)雙向綁定。這篇文章主要介紹了vue插件實現(xiàn)v-model功能,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue項目中使用this.$confirm方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09