I'm looking to change the background color of a selected item in a ListView in Nativescript-vue. Presently when I click an item it "flashes" gray as if its been selected but immediately reverts back to a white background.
My end-goal is to have a list that the user can scroll thru, select an item, and then click an "edit" button. The visual cue for what item has been selected is critical.
Rendering:
<template>
<page class="page" >
<ActionBar class="action-bar">
<Label class="action-bar-title" text="Manage Accounts"></Label>
</ActionBar>
<StackLayout>
<Button text="Add" />
<ListView for="account in accountsList" @itemTap="onItemTap" class="h2" style="height:150px">
<v-template>
<FlexboxLayout flexDirection="row">
<Label :text="account.name" />
</FlexboxLayout>
</v-template>
</ListView>
<!-- <ListPicker :items="accountsList" v-model="selectedItem" /> -->
<Button text="Edit" @tap="tapEdit" />
<Button text="Return" @tap="returnButton" />
</StackLayout>
</page>
</template>
Method:
onItemTap(event) {
const itemIndex = event.index;
// this.accounts[event.index].bgColor = "#3489db";
console.log(itemIndex);
}
Digging further thru the stacks, I encountered this issue / solution - How can I change color / backgroundColor of list item in nativescript-vue? , which seems exactly like what I'm looking to do. I lack sufficient points for posting a comment, but if someone knows how Louis solved the problem that would likely be ideal. Following his linked solution results in specifics for Ios in a more traditional NS app, and I am only mildly familiar with the NS-vue flavor presently.
Thank you.