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.在點擊事件內(nèi)部處理邏輯
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設(shè)置為button，否則會觸發(fā)表單提交。
<van-button native-type="button"> ? 發(fā)送驗證碼 </van-button>
這個問題的原因是瀏覽器中 button 標簽 type 屬性的默認值為submit，導(dǎo)致觸發(fā)表單提交。
我們會在下個大版本中將 type 的默認值調(diào)整為button來避免這個問題。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)驗證碼倒計時按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了如何修改Vue打包后文件的接口地址配置的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
element?ui組件中element.style怎么改詳解
element.style是一種內(nèi)聯(lián)樣式,一般都是代碼里寫死的,下面這篇文章主要給大家介紹了關(guān)于element?ui組件中element.style怎么改的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-06-06
Vue.js做select下拉列表的實例(ul-li標簽仿select標簽)
下面小編就為大家分享一篇Vue.js做select下拉列表的實例(ul-li標簽仿select標簽)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue中如何下載excel流文件及設(shè)置下載文件名，對vue感興趣的同學(xué)，可以參考下2021-05-05
vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決
這篇文章主要介紹了vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要給大家介紹了關(guān)于vue使用i18n如何實現(xiàn)國際化的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
用v-html解決Vue.js渲染中html標簽不被解析的問題
這篇文章主要給大家介紹了如何利用v-html解決Vue.js渲染過程中html標簽不能被解析，html標簽顯示為字符串的問題，文中通過圖文介紹的很詳細，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
解決cordova+vue 項目打包成APK應(yīng)用遇到的問題
這篇文章主要介紹了解決cordova+vue 項目打包成APK應(yīng)用遇到的問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
Vue Element前端應(yīng)用開發(fā)之獲取后端數(shù)據(jù)
這篇文章主要介紹了Vue Element前端應(yīng)用開發(fā)之獲取后端數(shù)據(jù)，對vue感興趣的同學(xué)，可以參考下2021-05-05