[Feature Request] Rendering el-switch components with H => within message box components can not change their values, Seeking train of thought, thanks. (MessageBox components can't change their values by using H => rendering el-switch components internally, find a way of thinking, thanks.)

psrheartache commented 5 years ago

Existing Component

是

Component Name

el-switch

Description

Rendering el-switch components with H => within messageBox components cannot change their values， Seeking train of thought， thanks. （messageBox组件内部使用h => 渲染el-switch组件无法更改其值，求个思路，感谢。）

element-bot commented 5 years ago

Translation of this issue:

Existing Component

yes

Component Name

El-switch

Description

Rendering El switch components with H = > within MessageBox components cannot change their values, seeking train of thought, thanks.

psrheartache commented 5 years ago

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <template>
            <el-button type="text" @click="open">点击打开 Message Box</el-button>
        </template>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var App = new Vue({
            el: '#app',
            data(){
                return {
                    switchValue: false
                }
            },
            methods: {
                open() {
                    const h = this.$createElement;
                    let that = this 
                    this.$msgbox({
                        title: '消息',
                        message: h('div', null, [
                            h('el-switch', {
                                attrs:{
                                    activeText: '月',
                                    inactiveText: '年',
                                    activeValue: that.switchValue,
                                    inactiveValue: !that.switchValue,
                                },
                                on:{
                                   'on-change': (val) => {
                                        alert(val)
                                   },
                                },
                                nativeOn:{
                                    click: that.alertValue,
                                }
                            }, ''),
                        ]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    })
                },
                alertValue(){
                    alert(123)
                    console.log(this)
                    this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
                    // this.switchValue = !this.switchValue
                }
            }
        })
    </script>
</body>
</html>

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

JianLin176 commented 2 years ago

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <template>
            <el-button type="text" @click="open">点击打开 Message Box</el-button>
        </template>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var App = new Vue({
            el: '#app',
            data(){
                return {
                    switchValue: false
                }
            },
            methods: {
                open() {
                    const h = this.$createElement;
                    let that = this 
                    this.$msgbox({
                        title: '消息',
                        message: h('div', null, [
                            h('el-switch', {
                                attrs:{
                                    activeText: '月',
                                    inactiveText: '年',
                                    activeValue: that.switchValue,
                                    inactiveValue: !that.switchValue,
                                },
                                on:{
                                   'on-change': (val) => {
                                        alert(val)
                                   },
                                },
                                nativeOn:{
                                    click: that.alertValue,
                                }
                            }, ''),
                        ]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    })
                },
                alertValue(){
                    alert(123)
                    console.log(this)
                    this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
                    // this.switchValue = !this.switchValue
                }
            }
        })
    </script>
</body>
</html>

this issues resolve https://github.com/ElemeFE/element/issues/16075

ElemeFE / element