快捷導(dǎo)航

解決vue?change阻止默認(rèn)事件問題

更新時(shí)間：2022年01月17日 10:20:22 作者：Traveler?

這篇文章主要介紹了vue?change阻止默認(rèn)事件問題,使用事件 @click.stop.native.prevent 解決 (使用@click.stop 或者 @click.prevent都無效，直接報(bào)錯(cuò)還阻止不了事件)，需要的朋友可以參考下

背景：復(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都無效，直接報(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>類型:</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ì)互相干擾，解決。。

沒有人能一路單純到底，但是要記住，別忘了最初的自己!

到此這篇關(guān)于解決vue change阻止默認(rèn)事件問題的文章就介紹到這了,更多相關(guān)vue阻止事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue的Props實(shí)例配置詳解
props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^來的數(shù)據(jù),與data、el、ref是一個(gè)級別的配置項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設(shè)置Props的相關(guān)資料,需要的朋友可以參考下
2022-11-11
深入淺析vue全局環(huán)境變量和模式
這篇文章主要介紹了vue全局環(huán)境變量和模式的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-04-04
vue中的ElementUI的使用詳解
本文通過實(shí)例代碼給大家介紹了vue中的ElementUI的使用，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-10-10
Vue源碼學(xué)習(xí)之響應(yīng)式是如何實(shí)現(xiàn)的
最近接觸了vue.js,一度非常好奇vue.js是如何監(jiān)測數(shù)據(jù)更新并且重新渲染頁面,這篇文章主要給大家介紹了關(guān)于Vue源碼學(xué)習(xí)之響應(yīng)式是如何實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2021-10-10
一文詳解Vue-組件自定義事件(綁定和解綁)
這篇文章主要介紹了Vue-組件自定義事件的綁定和解綁，文中有詳細(xì)的圖文實(shí)例，對學(xué)習(xí)或工作有一定的參考價(jià)值，需要的小伙伴可以閱讀下
2023-05-05
vue.js在標(biāo)簽屬性中插入變量參數(shù)的方法
這篇文章主要介紹了vue.js在標(biāo)簽屬性中插入變量參數(shù)的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-03-03
Vue + AnimeJS實(shí)現(xiàn)3d輪播圖的詳細(xì)代碼
輪播圖在開發(fā)中是經(jīng)常用到的,3D輪播圖是其中最常用的一種,所以在這篇文章中將給大家介紹Vue + AnimeJS實(shí)現(xiàn)3d輪播圖,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下
2024-01-01
vue實(shí)現(xiàn)文章點(diǎn)贊和差評功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章點(diǎn)贊和差評功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue之mixin混入詳解
這篇文章主要為大家介紹了Vue之mixin混入，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
vue使用better-scroll實(shí)現(xiàn)下拉刷新、上拉加載
這篇文章主要為大家詳細(xì)介紹了vue使用better-scroll實(shí)現(xiàn)下拉刷新、上拉加載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11