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