Programmatic scrolling with Vue

[rvdrijst]

Hi, I'm trying to scroll the VList programmatically to a specific index. However, I cannot seem to get a reference to the VList

Basically trying to do this:

<template>
  <VList ref="scroller" ...>
    ...
  </Vlist>
</template>

<script>
...
import { VList } from 'virtua/vue';
export default {
  ...
  setup(props, ctx) {
    const scroller = ref(null);  // using Vue 3.4
    watch(scroller, ()=>{
      // this never happens. `scroller.value` is always `null`
    });
    const doSomeScrolling = () => {
      // FAILS: scroller.value is always null 
      scroller.value.scrollBy(100);
    }
  }
}
</script>

I'm at a loss, but maybe the VList is set up in such a way that this doesn't work?

Any help is greatly appreciated!

[inokawa]

Could you make a reproduction? It did not reproduce in my environment.

[rvdrijst]

Thank you for having a look.

I had to return the scroller ref at the end of the setup function to make it work 🤦