当前位置:首页 > 经验笔记 > VUE > 正文内容

element中el-switch开关点击弹出确认框 阻止默认的el-switch 的点击事件 发送请求成功后才改变状态

han32682年前 (2024-04-08)VUE3610

Switch 开关

表示两种相互对立的状态间的切换,多用于触发「开/关」。

常见用法: 

1、绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。 

2、使用active-text属性与inactive-text属性来设置开关的文字描述。 

3、设置active-value和inactive-value属性,接受Boolean, String或Number类型的值。

image.png

element中el-switch开关点击弹出确认框时,状态先改变,点击确认/取消失效,怎么解决?

原因:v-model的数据双向绑定原理,点击开关时状态就已实时改变

只需将v-model改成:value="",再手动赋值即可

扫描二维码推送至手机访问。

版权声明:本文由瀚文博客发布,如需转载请注明出处。

本文链接:https://hanwenblog.com/post/102.html

分享给朋友:

相关文章

vue跳转时打开新窗口的方法

    1、<vue-link>标签实现新窗口打开    官方文档中说 v-link 指令被 <rou...

vue中实现点击按钮滚动到页面对应位置 使用css3平滑属性实现

vue中实现点击按钮滚动到页面对应位置 使用css3平滑属性实现

vue项目中,需要实现点击对应按钮,滚动到对应页面位置,下面分享一个简单实用的方法<template>   <div class="box&...

基于Vue的移动端图片裁剪组件(Clipic)可自动压缩

基于Vue的移动端图片裁剪组件(Clipic)可自动压缩

安装:Bashnpm install --save clipic使用代码:Markup<template>     ...

vue 用webpack 打包的时候添加版本号, VUE 项目更新部署时,浏览器页面缓存问题

因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。module.exports = {  ...

vue 去除前后空格trim的使用方法

一、使用trim修饰符<input v-model.trim = "massage" >二、使用filter过去属性 <...