解決vue?change阻止默認事件問題
更新時間：2022年01月17日 10:20:22 作者：Traveler?
這篇文章主要介紹了vue?change阻止默認事件問題,使用事件 @click.stop.native.prevent 解決 (使用@click.stop 或者 @click.prevent都無效，直接報錯還阻止不了事件)，需要的朋友可以參考下
背景：復(fù)選框內(nèi)部有個數(shù)量增減選項，并且兩個都是change事件。當(dāng)觸發(fā)內(nèi)部數(shù)量增減事件時，外部的復(fù)選change事件也會觸發(fā)，體驗很不好。
使用事件 @click.stop.native.prevent 解決 (使用@click.stop 或者 @click.prevent都無效，直接報錯還阻止不了事件)
<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>類型:</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事件不會互相干擾，解決。。
沒有人能一路單純到底，但是要記住，別忘了最初的自己!
到此這篇關(guān)于解決vue change阻止默認事件問題的文章就介紹到這了,更多相關(guān)vue阻止事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中如何使用element的日歷組件，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue中引入swiper報錯的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue3響應(yīng)式Proxy與Reflect的理解及基本使用實例詳解
這篇文章主要為大家介紹了vue3響應(yīng)式Proxy與Reflect的理解及基本使用實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
本篇文章主要介紹了Vue filter介紹及其使用詳解，VueJs 提供了強大的過濾器API，能夠?qū)?shù)據(jù)進行各種過濾處理。一起跟隨小編過來看看吧2017-10-10
element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼
這篇文章主要介紹了element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue2.0結(jié)合Element實現(xiàn)select動態(tài)控制input禁用實例
本篇文章主要介紹了vue2.0結(jié)合Element實現(xiàn)select動態(tài)控制input禁用實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
vue框架提供了前端開發(fā)組件的思想，可以通過組件來組合成一個完整的頁面，都是隨著組件數(shù)量原來越多，組件之間難免需要相互通信。本文將為大家介紹四種組件間的通信方式，需要的可以參考一下2022-01-01
vue-router跳轉(zhuǎn)時打開新頁面的兩種方法
這篇文章主要給大家介紹了關(guān)于vue-router跳轉(zhuǎn)時打開新頁面的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue-router具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章給大家介紹Vue單頁應(yīng)用如何引用單獨的樣式文件，本文以css文件為例，通過兩種方式給大家介紹的非常詳細，需要的朋友參考下吧2018-03-03
這篇文章主要介紹了Vue中的directive指令快速使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10