Handling scroll event

[SergeyYakubov]

How can I create a handler that reacts on a scroll event https://vuetifyjs.com/en/directives/scroll/

tried this

            vuetify.VTextarea(v_model="test", v_scroll_self=self.onScroll,
                              auto_grow=False, readonly=True, max_rows="3")

but it did not work

[jourdain]

Did you print it to see the output template?

Also keep in mind that the API let you register properties/events so they can be mapped to the expected syntax for vue in case they are not supported out of the box.

[SergeyYakubov]

do you have an example how to register v-scroll?

[jourdain]

vuetify.VTextarea(..., my_custom_property=self.onScroll, __properties=[("my_custom_property", "v-scroll.self)])

[SergeyYakubov]

Error: Don't know how to handle attribute name 'my_custom_property' with value '<bound method JobOutputsTab.onScroll of <topaz_data_reduction.app.views.job_outputs_tab.JobOutputsTab object at 0x1050e9000>>' in <class 'trame_vuetify.widgets.vuetify3.VTextarea'>::VTextarea

[jourdain]

Right, you actually want to map it like you do with events. So replace __properties= by __events=.

[jourdain]

Remember to print your element to validate/debug/understand what trame is generating for you.

[SergeyYakubov]

I tried that. This adds @ to the directive. And does not seem to react on the scroll
<VTextarea v-model="test" autoGrow maxRows="4" readonly @v-scroll.self="trigger('trigger__1')"

[jourdain]

yes that is also bad... So __properties is the right thing to do, but we don't have automatic Python method mapping in properties... So you will need to do it by hand.

You can use the

attrs_raw=[
   f'''v-scroll.self="() => trigger('{ self.server.controller.trigger_name(self.onScroll) }')"''',
]

[SergeyYakubov]

Thanks, Seb.

This works for me:

        vuetify.VTextarea(v_model="test", id="id-scroll",
                          raw_attrs=[
                              f'''v-scroll:#id-scroll="(e) => trigger('{self.server.controller.trigger_name(self.onScroll)}',[e.target.scrollTop])"''',
                          ],

Strange, with v-scroll.self it did not work, I had to set target explicitly.

[jourdain]

Is it because you are using Vuetify2 and looking at the Vuetify 3 API?

[SergeyYakubov]

no, I'm using vuetify3, just export it as vuetify :) from trame.widgets import vuetify3 as vuetify