Steven
Steven

Reputation: 1414

Force focus to a certain index in ListView

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?

Upvotes: 0

Views: 285

Answers (1)

TomG
TomG

Reputation: 538

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);
}

Upvotes: 2

Related Questions