vue change阻止默認事件-已解決

背景：復選框內部有個數量增減選項，並且兩個都是change事件。當觸發內部數量增減事件時，外部的復選change事件也會觸發，體驗很不好。

使用事件   @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">&times;</div>
                </el-checkbox>
            </el-checkbox-group>

效果

 

圖中綠色框和橙色框的change事件不會互相干擾，解決。。