Vue element Switch @change事件死循环解决方式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue element Switch @change事件死循环解决方式相关的知识,希望对你有一定的参考价值。

参考技术A 在Vue项目中用了一个el-switch组件,点击后触发事件,做出对应的操作.如果失败,swich再返回原来的值.

嗯.....逻辑上是没有错的.

错误使用方式一

<el-switch v-model="startWithSystem" @change ="OnAutoStart(startWithSystem)"></el-switch>

于是我看了文档,使用了change事件触发......

然后你就会发现,为什么风扇的转速特别快,浏览器无法点击了....

F12的log打印不断的在滚动.

哦...死循环了

错误使用方式二

于是想到了click事件

<el-switch v-model="startWithSystem" @click ="OnAutoStart(startWithSystem)"></el-switch>

使用@是不行的,不工作,

错误使用方式三

<el-switch v-model="startWithSystem" :click ="OnAutoStart(startWithSystem)"></el-switch>

:是工作起来了,但是....会执行很多次....应该是页面的任何点击都被捕获了..这样肯定不行

正确的方式

使用change事件是不行的,这样不论你点击修改还是js修改,都会触发,它自身的点击事件是无效的,

那么将其放入一个div中, 使用父容器的@click事件 ,就可以好好工作了

```

<div class="padRight" @click="OnAutoStart(startWithSystem)">

        <el-switch v-model="startWithSystem"></el-switch>

</div>

```

VUE element 修改密码

<template>
    <div>
        <div class="change-content">
            <header id="header" class="mui-bar mui-bar-nav">
                <span class="change-back" >
                  <img src="../../../img/left.png" @click="change_back" alt="" width="30px" height="20px"/>
              </span>
                <h1 class="mui-title">修改密码</h1>
            </header>
        </div>
        <div class="change-zhanghao">
            <p class="zhanghao">你的账号是 {{zhanghao}}</p>
            <p>修改密码以后,可以使用账号和密码登录</p>
        </div>
        <!--引入element插件HTML样式-->
        <template>
            <el-form class="user-account-key" ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="原密码" prop="lastpassword">
                    <el-input type="password" placeholder="请输入原密码" v-model="form.lastpassword"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="password">
                    <el-input type="password" placeholder="请设置新密码" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="qrpassword">
                    <el-input type="password" placeholder="请确认新密码" v-model="form.qrpassword"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(‘form‘)">修改</el-button>
                    <el-button @click="$refs[‘form‘].resetFields()">重置</el-button>
                </el-form-item>
            </el-form>
        </template>
    </div>
</template>

<script>
    import { Toast } from mint-ui;
    import { MessageBox } from mint-ui;
    export default {
        data() {
            //此处即表单发送之前验证  验证新密码与原密码
            let validateNewPassword = (rule, value, callback) => {
                if(value === this.form.lastpassword) {
                    callback(new Error(新密码不能与原密码相同!))
                } else {
                    callback()
                }
            }
            //此处即表单发送之前验证  验证新密码与再次确认
            let validateNewPassword2 = (rule, value, callback) => {
                if(value !== this.form.password) {
                    callback(new Error(与新密码不一致!))
                } else {
                    callback()
                }
            }
            return {
                zhanghao: ‘‘,
                form: {
                    lastpassword: ‘‘,
                    password: ‘‘,
                    qrpassword: ‘‘
                },
                rules: {
                    //验证规则
                    lastpassword: [{
                        required: true,
                        message: 请输入原密码,
                        trigger: blur
                    }],
                    password: [{
                            required: true,
                            message: 请设置新密码,
                            trigger: blur
                        },
                        {
                            validator: validateNewPassword,
                            trigger: blur
                        }
                    ],
                    qrpassword: [{
                            required: true,
                            message: 请确认新密码,
                            trigger: blur
                        },
                        {
                            validator: validateNewPassword2,
                            trigger: blur
                        }
                    ]
                }
            }
        },
        created() {
            //若无身份信息,则跳转登录页
            if(!(localStorage.getItem("user"))) {
                this.$router.push(/login)
            }
            //初始化
            this.getZhang()
        },
        methods: {
            getZhang() {
                this.user = JSON.parse(localStorage.getItem("user"))
                this.zhanghao = this.user.username
            },
            change_back(){
                this.$router.push(/tabs/my)
            },
            //提交事件
            onSubmit(formName) {
                this.user = JSON.parse(localStorage.getItem("user"))
                this.form.id = this.user.id
                this.$refs[formName].validate(valid => {
                    //valid 全为 true即执行以下操作
                    if(valid) {
                        this.$http
                            .post(api/v1/edituser, {
                                id: this.form.id,
                                lastpassword: this.form.lastpassword,
                                password: this.form.password,
                                qrpassword: this.form.qrpassword
                            })
                            .then(function(result) {
                                if(result.body.status == 200) {
                                    MessageBox.alert(操作成功).then(action => {
                                        this.$router.push(/tabs/my)
                                    });
                                } else if(result.body.status == 201) {
                                    Toast({
                                        message: result.body.message,
                                        duration: 2000
                                    });
                                }
                            }, function(result) {
                                Toast({
                                    message: "服务器异常",
                                    duration: 2000
                                })
                            });
                    } else {
                        this.$message.error(请正确填写表单)
                        return false
                    }
                })
            }
        },
    }
</script>

<style scoped>
    .change-back {
        position: absolute;
        top: 24%;
        left: 0%;
    }
    
    .change-content {
        position: absolute;
        top: 40%;
        left: 40%;
    }
    
    .change-zhanghao {
        position: relative;
        margin-top: 51px;
        margin-left: 15px;
    }
    
    .zhanghao {
        margin-bottom: 0;
    }
    
    .user-account-key {
        width: 88%;
    }
</style>

当然 要引入插件

vue element-ui
1.搭建vue
2.引入插件 npm install element-ui --save
3.在main.js 全局配置
import ElementUi from ‘element-ui’ //1.全局引入
import ‘element-ui/lib/theme-chalk/index.css’; //3.使用element中的css文件
Vue.use(ElementUi); //2.使用

 

根据同事要求修改,认为在data里面不能这样写,所以换了一种方式

<template>
    <div>
        <div class="change-content">
            <header id="header" class="mui-bar mui-bar-nav">
                <span class="change-back">
                  <img src="../../../img/left.png" @click="change_back" alt="" width="30px" height="20px"/>
              </span>
                <h1 class="mui-title">修改密码</h1>
            </header>
        </div>
        <div class="change-zhanghao">
            <p class="zhanghao">你的账号是 {{zhanghao}}</p>
            <p>修改密码以后,可以使用账号和密码登录</p>
        </div>
        <!--引入element插件HTML样式-->
        <template>
            <el-form class="user-account-key" ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="原密码" prop="lastpassword">
                    <el-input type="password" placeholder="请输入原密码" v-model="form.lastpassword"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="password">
                    <el-input type="password" placeholder="请设置新密码" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="qrpassword">
                    <el-input type="password" placeholder="请确认新密码" v-model="form.qrpassword"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(‘form‘)">修改</el-button>
                    <el-button @click="$refs[‘form‘].resetFields()">重置</el-button>
                </el-form-item>
            </el-form>
        </template>
    </div>
</template>

<script>
    import { Toast } from mint-ui;
    import { MessageBox } from mint-ui;
    export default {
        data() {
            return {
                zhanghao: ‘‘,
                form: {
                    lastpassword: ‘‘,
                    password: ‘‘,
                    qrpassword: ‘‘
                },
                rules: {
                    //验证规则
                    lastpassword: [{
                        required: true,
                        message: 请输入原密码,
                        trigger: blur
                    }],
                    password: [{
                        required: true,
                        message: 请设置新密码,
                        trigger: blur
                    }, ],
                    qrpassword: [{
                        required: true,
                        message: 请确认新密码,
                        trigger: blur
                    }, ]
                }
            }
        },
        created() {
            //若无身份信息,则跳转登录页
            if(!(localStorage.getItem("user"))) {
                this.$router.push(/login)
            }
            //初始化
            this.getZhang()
        },
        methods: {
            getZhang() {
                this.user = JSON.parse(localStorage.getItem("user"))
                this.zhanghao = this.user.username
            },
            change_back() {
                this.$router.push(/tabs/my)
            },
            //提交事件
            onSubmit(formName) {
                this.user = JSON.parse(localStorage.getItem("user"))
                this.form.id = this.user.id
                this.$refs[formName].validate(valid => {
                    //valid 全为 true即执行以下操作
                    if(valid) {
                        if(this.form.lastpassword === this.form.password) {
                            Toast({
                                message: 原密码不能与新密码相同,
                                duration: 1000
                            });
                            return
                        }
                        if(this.form.password != this.form.qrpassword) {
                            Toast({
                                message: 确认密码与新密码不一致,
                                duration: 1000
                            });
                            return
                        }
                        this.$http
                            .post(api/v1/edituser, {
                                id: this.form.id,
                                lastpassword: this.form.lastpassword,
                                password: this.form.password,
                                qrpassword: this.form.qrpassword
                            })
                            .then(function(result) {
                                if(result.body.status == 200) {
                                    MessageBox.alert(操作成功).then(action => {
                                        this.$router.push(/tabs/my)
                                    });
                                } else if(result.body.status == 201) {
                                    Toast({
                                        message: result.body.message,
                                        duration: 2000
                                    });
                                }
                            }, function(result) {
                                Toast({
                                    message: "服务器异常",
                                    duration: 2000
                                })
                            });
                    } else {
                        this.$message.error(请正确填写表单)
                        return false
                    }
                })
            }
        },
    }
</script>

<style scoped>
    .change-back {
        position: absolute;
        top: 24%;
        left: 0%;
    }
    
    .change-content {
        position: absolute;
        top: 40%;
        left: 40%;
    }
    
    .change-zhanghao {
        position: relative;
        margin-top: 51px;
        margin-left: 15px;
    }
    
    .zhanghao {
        margin-bottom: 0;
    }
    
    .user-account-key {
        width: 88%;
    }
</style>

 

以上是关于Vue element Switch @change事件死循环解决方式的主要内容,如果未能解决你的问题,请参考以下文章

VUE element 修改密码

vue element ui 表格 selection-change方法使用(获取某行数据)

vue使用v-for循环,动态修改element-ui的el-switch

vue+element-ui分页功能

element-ui输入框的怎么获取change事件返回的值?

vue+element中怎么利用change事件,使选择器选中某一个值之后,弹出另一个选择器?