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

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

han32682年前 (2024-04-08)VUE3139

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中$set的使用踩坑日记

vue中$set的使用踩坑日记

1、为什么要用set?在vue中,并不是任何时候数据都是双向绑定的。在官方文档中,有这样一段话,如下:从文档得知,当数据没有被双向绑定的时候,我们就需要使用set了2、set用法解决数据没有被双向绑定...

基于Vue的移动端图片裁剪组件(vue-imgcut)

基于Vue的移动端图片裁剪组件(vue-imgcut)

安装:npm install vue-imgcut –save使用代码:<template>     <div...

element-ui Tree 树形控件实现单选 最简方法VUE

做项目时需要用到Tree树形控件单选但是Tree组件没有单选设置,网上找了几个方法不太适应,看了官网文档发现很简单 代码如下      &n...

vue element table expand 设置只可以展开一行、设置点击行即可打开扩展内容

在Vue中使用Element UI的el-table组件时,‌可以通过以下步骤设置只可以展开一行以及通过点击行即可打开扩展内容:‌设置只可以展开一行:‌通过监听expand-change事件来实现每次...

elementUI Cascader组件在for循环中无法使用getCheckedNodes这个方法

elementUI Cascader组件在for循环中无法使用getCheckedNodes这个方法

上一篇文章说了elementUI组件获取label的值,把Cascader选择器放在for循环中问题又来了用getCheckedNodes报错没有这个方法我就试探性的看看他的上级有没有存储 ...