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

解決vue?change阻止默認事件問題

 更新時間:2022年01月17日 10:20:22   作者:Traveler?  
這篇文章主要介紹了vue?change阻止默認事件問題,使用事件 @click.stop.native.prevent 解決 (使用@click.stop 或者 @click.prevent都無效,直接報錯還阻止不了事件),需要的朋友可以參考下

背景:復選框內部有個數量增減選項,并且兩個都是change事件。當觸發(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>數量:</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事件不會互相干擾,解決。。

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

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

相關文章

  • vue中使用element日歷組件的示例代碼

    vue中使用element日歷組件的示例代碼

    這篇文章主要介紹了vue中如何使用element的日歷組件,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-09-09
  • Vue中引入swiper報錯的問題及解決

    Vue中引入swiper報錯的問題及解決

    這篇文章主要介紹了Vue中引入swiper報錯的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue3響應式Proxy與Reflect的理解及基本使用實例詳解

    vue3響應式Proxy與Reflect的理解及基本使用實例詳解

    這篇文章主要為大家介紹了vue3響應式Proxy與Reflect的理解及基本使用實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • Vue filter介紹及其使用詳解

    Vue filter介紹及其使用詳解

    本篇文章主要介紹了Vue filter介紹及其使用詳解,VueJs 提供了強大的過濾器API,能夠對數據進行各種過濾處理。一起跟隨小編過來看看吧
    2017-10-10
  • element-ui tree結構實現(xiàn)增刪改自定義功能代碼

    element-ui tree結構實現(xiàn)增刪改自定義功能代碼

    這篇文章主要介紹了element-ui tree結構實現(xiàn)增刪改自定義功能代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue2.0結合Element實現(xiàn)select動態(tài)控制input禁用實例

    vue2.0結合Element實現(xiàn)select動態(tài)控制input禁用實例

    本篇文章主要介紹了vue2.0結合Element實現(xiàn)select動態(tài)控制input禁用實例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • Vue組件之間四種通信方式詳解

    Vue組件之間四種通信方式詳解

    vue框架提供了前端開發(fā)組件的思想,可以通過組件來組合成一個完整的頁面,都是隨著組件數量原來越多,組件之間難免需要相互通信。本文將為大家介紹四種組件間的通信方式,需要的可以參考一下
    2022-01-01
  • vue-router跳轉時打開新頁面的兩種方法

    vue-router跳轉時打開新頁面的兩種方法

    這篇文章主要給大家介紹了關于vue-router跳轉時打開新頁面的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue-router具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-07-07
  • Vue單頁應用引用單獨的樣式文件的兩種方式

    Vue單頁應用引用單獨的樣式文件的兩種方式

    這篇文章給大家介紹Vue單頁應用如何引用單獨的樣式文件,本文以css文件為例,通過兩種方式給大家介紹的非常詳細,需要的朋友參考下吧
    2018-03-03
  • Vue中的directive指令快速使用

    Vue中的directive指令快速使用

    這篇文章主要介紹了Vue中的directive指令快速使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10

最新評論