这是 element-ui 的 bug 吗?

作者站长头像
站长
· 阅读数 13

element-ui InfiniteScroll

在线地址https://codesandbox.io/p/sandbox/hopeful-knuth-twdttl?file=%2...

我的使用方式

v-infinite-scroll="load"
:infinite-scroll-immediate="false"

但是还是触发了 load 方法

默默打开 element-ui 源码调试了一下packages/infinite-scroll/src/main.js

  • line:69

    let value = el.getAttribute(`infinite-scroll-${key}`);

发现这个 value 永远都是 true,但是我明明传递的是 false

后来看了 vue 源码里面 对 domattribute 有这样一段处理

src/platforms/web/runtime/modules/attrs.js

  • line:68

    if (isFalsyAttrValue(value)) {
      el.removeAttribute(key)
    } else {
      ...
    }

false 的值会被移除掉

导致 element-ui 获取到的 value 永远是 null 就取了默认值 true

请教一下各位大佬,这是 element-uibug 还是我哪里处理的有问题?

希望能解释一下这个问题

回复
1个回答
avatar
test
2024-06-21

这里有几个因素:1.InfiniteScroll是一个指令,指令可以附加到任何元素上,指令可以获取绑定值的具体类型。2.vue里不显示定义成props的属性都会成为元素的attribute附加到元素上,而原生DOM的attribute都是字符,不存在布尔、数值这些类型,所以绑定属性【不是props】的值都只能是字符,如果你用v-bind绑定属性那么vue也会将其转成字符附加到DOM上【除开false】3.InfiniteScroll拓展的那些属性其实是DOM的attribute,并非prop,element-ui文档里并没有对这个进行说明而且还显眼的写上了类型,大多数第一直觉都会将其当做prop来传递,出问题了第一时间可能也不容易联想到第2点,文档里最好是说明是字符'false'|'true'这样更好一点

综合以上原因,它不是bug,但是非要甩锅的话,锅在element-ui吧我觉得

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容