欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vant組件表單外部的button觸發(fā)form表單的submit事件問題

 更新時(shí)間：2022年06月24日 08:57:45   作者：manda?Liu  
這篇文章主要介紹了vant組件表單外部的button觸發(fā)form表單的submit事件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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í)就會(huì)觸發(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="身份證號(hào)碼"
? ? ? ? ? ? ?/>
? ? ? ? ? ? ?<van-field
? ? ? ? ? ? ? ? ?readonly
? ? ? ? ? ? ? ? ?v-model="phoneNumber"
? ? ? ? ? ? ? ? ?name="phone"
? ? ? ? ? ? ? ? ?label="手機(jī)號(hào)"
? ? ? ? ? ? ?/>
? ? ? ? ?</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)擊表單中普通按鈕為什么會(huì)觸發(fā)表單提交

在表單中，除了提交按鈕外，可能還有一些其他的功能性按鈕，如發(fā)送驗(yàn)證碼按鈕。

在使用這些按鈕時(shí)，要注意將native-type設(shè)置為button，否則會(huì)觸發(fā)表單提交。

<van-button native-type="button">
? 發(fā)送驗(yàn)證碼
</van-button>

這個(gè)問題的原因是瀏覽器中 button 標(biāo)簽 type 屬性的默認(rèn)值為submit，導(dǎo)致觸發(fā)表單提交。

我們會(huì)在下個(gè)大版本中將 type 的默認(rèn)值調(diào)整為button來避免這個(gè)問題。 

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論