How does vue stop bubbling events?


    <el-checkbox style="width: 100%;height: 45px" v-for="(element,index) in formThead" :key="index" :label="element.value" @change="test1()">
                                <el-slider v-model="element.width" :max="200" style="margin-bottom: -30px;margin-left: 100px;width: 450px" show-input @change.stop="test2()" ></el-slider>
                                {{element.label}}
                            </el-checkbox>

how can I put an el-slider in my el-checkbox to stop bubbles? the stop searched on the Internet does not work

How should I write

Javascript element-ui vue.js

Apr.07,2021

the problem is here
in label

this should not be easy to change. Make your own wheel

finally accidentally solved

A layer of label is placed on the outer layer of the el-slider so that it does not start the event of the label where the check-box is located

    <el-checkbox-group v-model="formTheadData"  >

                    <draggable v-model="formThead" >

                        <el-checkbox style="width: 100%;height: 45px" v-for="(element,index) in formThead" :key="index"
                                     :label="element.value" @change="test1">

                            <label>

                                <el-slider v-model="element.width" :max="200" style="margin-bottom: -30px;margin-left: 32%;width: 400px"  show-input @change="test1"></el-slider>

                            </label>
                            {{element.label}}

                        </el-checkbox>



                    </draggable>

                </el-checkbox-group>

Thank you @ zhanggy for the fact that the problem is on label, not event bubbling

show-input set to false. This change event is the native event generated by the input inside. The change event on el-slider is a custom event, and there is no event propagation.

Previous: How webrtc sets the number of ice connection attempts

Next: Advantages and disadvantages of aspectj, asm and javassist

Element-ui card header style is invalid under scoped
I want to change the style of the head of the card and find that it affects the cards on other pages. then I added scoped, , but the modified style is invalid. How to change the configuration ? .el-card__header { background-color: -sharp999999; ...

Css javascript element-ui vue.js

Mar.01,2021
VUE ElementUI Table fixed custom trailing line
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="" width="180"> < el-table-column>...

Table javascript element-ui vue.js

Mar.04,2021
The form check about the logical relation of concatenation in element-ui
the specific UI is shown as follows: : ...

Javascript element-ui vue.js

Mar.05,2021
Visible.sync, what does that mean?
There is such a sentence on elementui, which is not explained by looking up the data. What is this? ...

Javascript element-ui vue.js

Mar.20,2021
The element Ui paging size-change event triggers the current-change event at the same time, resulting in two calls to the interface
element Ui paging size-change event triggers also initiates current-change event, resulting in two calls to the interface <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page....

Html javascript element-ui vue.js

Mar.21,2021
The problem with the Element UI paging method call, why not execute the method written in @ size-change?
because I have multiple data lists on my page, I integrate the corresponding data methods into one method, and then return the methods in the integration method. The code goes like this: script template usecaseMetheds().pageSizeChange : 1 limi...

Javascript element-ui vue.js

Mar.21,2021
How to verify whether the user has submitted or not when the elementUI upload component clicks submit?
how to verify that it has been uploaded after clicking the submit button? ...

Javascript element-ui vue.js

Mar.21,2021
The table setting in element dialong is checked by default
1. Click the button to pop up a dialog and request the data to be displayed by table. There is a table and paging function in dialog. When dialog is opened, the check box in table is selected by default. I did this, but there was no response. butto...

Javascript element-ui vue.js

Apr.23,2021
How does a form form in vue receive data and return it to the backend at the same time
is similar to such a form. The product name and product model in the first row need to be fetched from the backend, but all the data filled in the table should be returned to the backend interface. How to bind the value in el-from. suppose the code ...

Javascript element-ui vue.js

May.31,2021
Element switch how to write the effect when one of the items is selected and the others are changed to unselected?
I would like to ask if one of the switch sliders is true, and the other sliders are all changed into false. Only one item can be selected . ...

Javascript element-ui vue.js

Jun.01,2021
I'd like to ask how to adjust some small styles of vue element el-table.
the vue project uses the element framework, uses the el-table component, modifies the css style, and the local release style appears normally, but the CSS has not been modified since it was published to IIS. use this method to modify the style of el-t...

Javascript element-ui vue.js

Jun.16,2021
Encapsulated the prompt box of Elementui and reported an error
this is an example given by the official of ele.me: this.$alert( , , { confirmButtonText: , callback: action => { this.$message({ type: info , message: `action: ${ action }` ...

Html5 html javascript element-ui vue.js

Jun.25,2021
When vue uses elementUI, to customize the scroll bar, there is a gap between the table fixed column and the scroll bar, how to solve it?
when vue uses elementUI, to customize the scroll bar, there is a gap between the table fixed column and the scroll bar. just started to directly override the "el-table__fixed " attribute of table to remove the gap, but the interface is dynamically adap...

Html javascript element-ui vue.js

Jul.06,2021
How does the paging component of vue+elemrnt ui return to the top of the table when turning pages?
how does the paging component of vue+elemrnt ui return to the top of the table when turning pages related codes <el-pagination class= pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" ...

Javascript element-ui vue.js

Oct.21,2021
What do you mean by this.$emit ('input',this.val); in vue?
because of its high repeatability, it is now packaged into a component, Baidu Sub-component: <template> <div> <div class="group"> <label>{{title}}< label> <input type=&...

Css html5 javascript element-ui vue.js

Jan.17,2022
Vue, I pass a number, and I receive string?.
write a component by yourself, which is passed to the subcomponent as number, but the result subcomponent receives stringtype . parent component: <cmsProgress num=40>< cmsProgress> Sub-component: <el-progress :text-inside="true&...

Html5 javascript element-ui vue.js

Feb.06,2022
El-tree in elementui, data echo problem
when the el-tree related array is returned in the background, the submenus are not all selected, but as long as the id of the parent menu is in the array, then his submenus are all selected method used this.$axios.get( menu queryMenuIdList?roleI...

Javascript element-ui vue.js

Feb.18,2022
The vue child component passes values to the parent component
element-ui : : what is the reason for this? ...

Html5 javascript element-ui vue.js

Mar.04,2022
Echarts + vue static data is normal, the data obtained by Ajax can not be displayed?
enter the interface below: : :mounted : load data in the created lifecycle created:function(){ this.load_leftTop(); } ...

Html5 javascript element-ui vue.js echarts

Mar.13,2022
Background permission settin
_this.arrTitle = []; var listTitle = data.data; arrTitle html for (let i in listTitle) { _this.arrTitle.push(listTitle[i]); } 1.vue builds the project, selects permissions and creates roles in the background...

Jquery javascript element-ui vue.js

Mar.21,2022