element-ui中el-radio-group组件绑定点击事件触发多次的解决办法
1、需求
电商首页需求,需要做个单选框,然后点击选中切换图标方向及更换价格升倒序,如下图:
从官网文档看,单选框支持change event,使用click加载按钮处不会触发选中
但是使用 @click.native 事件不做处理的话会发送多次请求
解决方案如下:
<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>
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()
}
},
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性