解決vue?change阻止默認(rèn)事件問(wèn)題
背景:復(fù)選框內(nèi)部有個(gè)數(shù)量增減選項(xiàng),并且兩個(gè)都是change事件。當(dāng)觸發(fā)內(nèi)部數(shù)量增減事件時(shí),外部的復(fù)選change事件也會(huì)觸發(fā),體驗(yàn)很不好。
使用事件 @click.stop.native.prevent 解決 (使用@click.stop 或者 @click.prevent都無(wú)效,直接報(bào)錯(cuò)還阻止不了事件)
<el-checkbox-group v-model="checked_list" @click.stop @change=checkedFn> <el-checkbox v-for="(item,index) in listData" :label="index" :key="index" class="checkbox_shop_car"> <div class="shop_list"> <div><label>props_name:</label>{{item.props_name}}</div> <div><label>類(lèi)型:</label>{{item.name_suffix}}</div> <div><label>數(shù)量:</label> <el-input-number size="mini" v-model="item.number" @change="handleChange(item)" :min="1" @click.stop.native.prevent></el-input-number> </div> </div> <div @click="deleteFn(item.id)" class="delete_icon">×</div> </el-checkbox> </el-checkbox-group>
效果
圖中綠色框和橙色框的change事件不會(huì)互相干擾,解決。。
沒(méi)有人能一路單純到底,但是要記住,別忘了最初的自己!
到此這篇關(guān)于解決vue change阻止默認(rèn)事件問(wèn)題的文章就介紹到這了,更多相關(guān)vue阻止事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue中引入swiper報(bào)錯(cuò)的問(wèn)題及解決
這篇文章主要介紹了Vue中引入swiper報(bào)錯(cuò)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue3響應(yīng)式Proxy與Reflect的理解及基本使用實(shí)例詳解
這篇文章主要為大家介紹了vue3響應(yīng)式Proxy與Reflect的理解及基本使用實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼
這篇文章主要介紹了element-ui tree結(jié)構(gòu)實(shí)現(xiàn)增刪改自定義功能代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08vue2.0結(jié)合Element實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用實(shí)例
本篇文章主要介紹了vue2.0結(jié)合Element實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05vue-router跳轉(zhuǎn)時(shí)打開(kāi)新頁(yè)面的兩種方法
這篇文章主要給大家介紹了關(guān)于vue-router跳轉(zhuǎn)時(shí)打開(kāi)新頁(yè)面的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue-router具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07Vue單頁(yè)應(yīng)用引用單獨(dú)的樣式文件的兩種方式
這篇文章給大家介紹Vue單頁(yè)應(yīng)用如何引用單獨(dú)的樣式文件,本文以css文件為例,通過(guò)兩種方式給大家介紹的非常詳細(xì),需要的朋友參考下吧2018-03-03