Force focus to a certain index in ListView

Question

I create a list and depending on the input given by the user I want it to focus on a certain element in the list.

<ListView for="(item, index) in timeTable" @itemTap="onItemTap">
    <v-template>
            <FlexboxLayout class="travelDetails" :ref="index">
            </FlexboxLayout>
    </v-template>
</ListView>

created: function(){
     this.$refs[this.indexIWantToFocusOn].nativeView.focus()
} 

But the problem is the reference of that element isn't rendered yet.

So is there a way to force that index should start at other value than 0?

Or Is there another way around?

Answer 1

You could try scrolling to the desired index after the ListView is loaded through scrollToIndex. Check the docs.

<ListView for="item in timeTable" @itemTap="onItemTap"
    ref="myList" @loaded="onLoaded">
    <v-template>
        <FlexboxLayout class="travelDetails">
        </FlexboxLayout>
    </v-template>
</ListView>

onLoaded() {
    this.$refs.myList.nativeView.scrollToIndex(this.indexIWantToFocusOn);
}