Vue, problemas con event listener

ududud #1 Mar '20

Buenas, llevo unos meses empezando con Vue, y actualmente lo estoy utilizando para acabar mi proyecto final de DAW. Estoy utilizando Google Charts, y para ello encontré la librería que ya lo tiene transformado en componentes para Vue, el problema que estoy teniendo es que quiero solucionar la advertencia que me aparece en consola de Google Chrome, pero no consigo como hacerlo en Vue.

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Un ejemplo para entender a lo que me refiero es este: https://codesandbox.io/embed/v3qorzrxm7

y para poder visualizar el [Violation] abrirlo aquí y mirar en consola https://v3qorzrxm7.csb.app/

MisKo #2 Mar '20

A mi no me salta ningun error en consola (ni en chrome, ni en firefox)

Puede que sea algún plugin o algo que tienes puesto en el navegador? xD

Prueba en una pestaña de incógnito sin addons activos

1 respuesta

ududud #3 Mar '20

#2

1 respuesta

MisKo #4 Mar '20

#3 Como te comentaba a mi no me aparece pero he googleado un poco ahora que he visto el nombre de JS y parte del error y lo que he encontrado básicamente es que, en código de este tipo, se agregue el attr: pasive

document.addEventListener(eventName, handler, {passive: true});

Si es código tuyo, con agregarle eso debería de valer, pero lo más probable es que sea algo que viene en la propia librería y que no puedas editar (salvo que hagas un fork de la librería que falle y luego cargues la tuya)

https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners

ududud #5 Mar '20

ya, es lo que he estado mirando pero claro, hay demasiadas dependencias, parte de la librería de google charts, luego de la librería de vue-google-chart que trabaja con la anterior.. probe de todo y desisto xD

Vue, problemas con event listener

Usuarios habituales

Tags