1. 程式人生 > 其它 >vue change阻止預設事件-已解決

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事件不會互相干擾,解決。。

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