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.

CodePudding user response：

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

:

methods: {
    inList(contact){
        return this.contactIds.contains(contact.id) ? 'clicked' : null;
    }
},
computed: {
    contactIds() {
        return this.chosenContacts.map(item => item.id);
    }
}