javascript - 这是 element-ui 的 bug 吗?

Question

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 源码里面 对 dom 的 attribute 有这样一段处理

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

• line:68

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

false 的值会被移除掉

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

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

希望能解释一下这个问题

Answer 1

这里有几个因素：
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吧我觉得

Answer 2

你这里不是用 v-bind 吗，去掉就可以了

Answer 3

这个问题涉及到 Vue.js 和 element-ui 的一个特定行为。首先，让我们解释一下 Vue.js 在处理 DOM 属性时是如何工作的。

在 Vue.js 中，当你在模板中为元素设置一个属性，Vue.js 会将该属性的值绑定到该元素的 v-bind 属性上。例如，如果你写 v-bind:class="{ active: isActive }"，Vue.js 实际上会将这个属性转换成一个表达式，像这样：v-bind:class="{ active: isActive }" 实际上会被转换成一个表达式，看起来像这样：v-bind:class="isActive ? 'active' : ''"。这意味着如果 isActive 是 false，那么这个类就会被移除。

现在让我们回到你的问题。你正在使用 element-ui 的 v-infinite-scroll 指令，并且你正在尝试传递一个 false 值给它。然而，你发现这个值似乎被移除了。这实际上是因为 Vue.js 在处理这个属性时将其转换成了表达式，并且由于 false 在这个上下文中被视为 falsy（在 JavaScript 中，falsy 值包括 false、0、""、null、undefined 和 NaN），所以这个属性被移除了。

因此，这不是 element-ui 的 bug，而是 Vue.js 的预期行为。如果你想在 v-infinite-scroll 指令中传递一个 false 值并希望它被保留，你可能需要使用一个不同的方法来实现这一点，或者找到一种方法来避免 Vue.js 将这个属性转换成一个表达式。

请注意，虽然 Vue.js 提供了强大的数据绑定功能，但有时候你可能需要更精细地控制 DOM 元素的属性。在这种情况下，你可能需要直接操作 DOM 元素，或者使用一些第三方的库或插件来帮助你实现这个目标。