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.
Since you tagged this with vue my answer will be in css however use the check to return what ever you want.
.clicked {
background-color: red;
}
:class="inList(contact)"
methods: {
inList(contact){
return this.contactIds.contains(contact.id) ? 'clicked' : null;
}
},
computed: {
contactIds() {
return this.chosenContacts.map(item => item.id);
}
}