Soy relativamente nuevo en Ionic (Vue), así que lo siento si es una pregunta de novato:
<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>El código anterior genera una lista de contactos, y me gustaría resaltar o cambiar de alguna manera el color de fondo solo para los elegidos (en los que se hizo clic).
También tengo el siguiente método:
data() { return { contacts: [], chosenContacts: [] }; }, methods: { async loadContacts() { Contacts.getContacts().then(result => { this.contacts = result.contacts; }); }, addContact(contact) { this.chosenContacts.push(contact); } }, mounted() { this.loadContacts(); }Me gustaría hacer eso o simplemente agregar un ícono solo para los elegidos/seleccionados.
Dado que etiquetó esto con vue, mi respuesta estará en css; sin embargo, use el cheque para devolver lo que quiera.
.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); } }