I’m relatively new to Ionic (Vue) so sorry if it’s a bit of a newbie question:
<template>
<base-layout page-title="Choose Players" page-default-back-link="/home">
<ion-item v-for="contact in contacts" :key="contact.phoneNumbers[0]" @click="addContact(contact)">
{{ contact.displayName }}
</ion-item>
</base-layout>
</template>
The above code generates a list of Contacts, and I’d like to somehow highlight or change the background color only for the chosen (clicked) ones.
I also have the below method:
data() {
return {
contacts: [],
chosenContacts: []
};
},
methods: {
async loadContacts() {
Contacts.getContacts().then(result => {
this.contacts = result.contacts;
});
},
addContact(contact) {
this.chosenContacts.push(contact);
}
},
mounted() {
this.loadContacts();
}
I’d like to do either that or just adding an icon only for the chosen/selected ones.