search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.86k stars 6.97k forks source link

[Bug Report][3.6.8] Infinite Scroll does not support Vue's standard hyphenated attribute spec for onLoad #20344

Open lwalter-ax opened 2 months ago

lwalter-ax commented 2 months ago

Environment

Vuetify Version: 3.6.8 Vue Version: 3.4.33 Browsers: Chrome 127.0.0.0 OS: Mac OS 10.15.7

Steps to reproduce

Take the example from the vuetify docs page for the infinite scroll component. In the template, change "onLoad:" to "on-load:" Try infinitely scrolling the list -- the load function won't be called

Expected Behavior

It's standard for template attributes to use hyphenated case, so my ESLint keeps auto-changing this to be "on-load" which breaks it. The component should support using hyphenated case.

Actual Behavior

The load() function is not called if the attribute name is in hyphenated case.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

My workaround -- add an ignore to my linter config so my linter stops "fixing" it from "onLoad" to "on-load". In .eslintrc.js add: 'vue/attribute-hyphenation': { ignore: ["onLoad"], },

KaelWD commented 2 months ago

It should be @load or v-on:load, both of which are compiled to onLoad by vue. I would expect :on-load to work the same but for some reason it stays as "on-load", but that would be something to bring up with https://github.com/vuejs/core/issues.

lwalter-ax commented 1 month ago

Shoving this off to a vue issue doesn't help your user base. If we can't get the actual example used on the page to work then you've got a problem with your documentation at minimum. Your example doesn't use @load or v-on:load it uses :onLoad which doesn't work. Can you please at least update your example on your page?

KaelWD commented 1 month ago

I missed that this was from an example not something you came up with yourself.