项目开发踩坑记:ElementUI的Radio组件change事件触发两次?

   刚开始是一直在网上百度,说Radio标签解析后包含input和label标签,所以点击时一次是在input标签上,一次是在label标签上,所以是触发了两次,看了下控制台解析情况确实是这样,但是按照网上的解决方法试过之后都不行;

项目开发踩坑记:ElementUI的Radio组件change事件触发两次?_第1张图片

     具体解决方法有:

      1. 在点击事件上添加标签名的判断,确保只执行一次:if(e.target.tagName==='INPUT')  return

 水果
 芒果

  test(e, val) {
    if(e.target.tagName==='INPUT')  return
  }

        2.  阻止默认事件的触发;即 在点击事件上添加 .prevent修饰符;

        3.  阻止事件冒泡的触发;即 在点击事件上添加 .stop修饰符;

以上方法都试过后发现问题还未解决;

最后通过控制台发现是接口调用两次,但是第二次接口返回慢(超过5秒)导致的问题,

解决步骤:

1. 先将接口改成一次调用,发现基本没问题;

2. 在postMan中连续多次调用发现第二次接口响应确实慢;

最后结论:首先是由于页面在created和activated生命周期中触发了两次接口的问题;另外是由于接口连续多次调用时第二次响应慢的问题;

解决方案:

1. 去掉页面activated中的接口调用,使页面接口只调用一次(注: 此时的业务场景为商品编辑页,所以在切换tab时无需二次调用接口更新页面数据,也符合业务需求,所以才能去掉第二次接口的调用)

2. 后端进行sql查询优化

所以如果有相同坑的时候,建议排查步骤

1. 分析是否是生命周期导致接口多次调用的问题;

2. 分析是否是接口响应慢导致的问题;

你可能感兴趣的:(Vue,vue.js)