element-ui中el-radio-group组件绑定点击事件触发多次的解决办法

1、需求

电商首页需求,需要做个单选框,然后点击选中切换图标方向及更换价格升倒序,如下图:


从官网文档看,单选框支持change event,使用click 加载按钮处不会触发选中

但是使用 @click.native 事件不做处理的话会发送多次请求

解决方案如下:

bash 复制代码
<el-radio-group v-model="buttonRightRadio" id="buttonRightRadio">
                        <el-radio-button label="default" @click.native="sortBy('default',$event)">默认</el-radio-button>
                        <el-radio-button label="sales" @click.native="sortBy('sales',$event)">销量
                            <i :class="{'el-icon-top': sortType === 'sales' && sortDirection === 'desc', 'el-icon-bottom': sortType === 'sales' && sortDirection === 'asc'}"></i>
                        </el-radio-button>
                        <el-radio-button label="price" @click.native="sortBy('price',$event)">价格
                            <i :class="{'el-icon-top': sortType === 'price' && sortDirection === 'desc', 'el-icon-bottom': sortType === 'price' && sortDirection === 'asc'}"></i>
                        </el-radio-button>
                    </el-radio-group>
bash 复制代码
  sortBy(type, event) {
  //此处解决发送多次请求
            if (event.target.tagName != 'INPUT') {
                return;
            }
            if (type === 'default') {
                this.sortType = '';
                this.sortDirection = '';
                this.load();
                return;
            }
            if (this.sortType === type) {
                // 如果当前已经是该排序方式,则切换排序方向
                this.sortDirection = this.sortDirection === 'desc' ? 'asc' : 'desc';
                this.load()
            } else {
                // 如果当前不是该排序方式,则设置为该排序方式,并将排序方向设为降序
                this.sortType = type;
                this.sortDirection = 'desc';
                this.load()
            }
        },
相关推荐
随云6322 分钟前
WebGL编程指南之着色器语言GLSL ES(入门GLSL ES这篇就够了)
前端·webgl
寻找09之夏1 小时前
【Vue3实战】:用导航守卫拦截未保存的编辑,提升用户体验
前端·vue.js
多多米10052 小时前
初学Vue(2)
前端·javascript·vue.js
柏箱2 小时前
PHP基本语法总结
开发语言·前端·html·php
新缸中之脑2 小时前
Llama 3.2 安卓手机安装教程
前端·人工智能·算法
hmz8562 小时前
最新网课搜题答案查询小程序源码/题库多接口微信小程序源码+自带流量主
前端·微信小程序·小程序
看到请催我学习2 小时前
内存缓存和硬盘缓存
开发语言·前端·javascript·vue.js·缓存·ecmascript
blaizeer3 小时前
深入理解 CSS 浮动(Float):详尽指南
前端·css
编程老船长3 小时前
网页设计基础 第一讲:软件分类介绍、工具选择与课程概览
前端
编程老船长3 小时前
网页设计基础 第二讲:安装与配置 VSCode 开发工具,创建第一个 HTML 页面
前端