如果選擇，更改所選離子項目的顏色

Question

我對 Ionic (Vue) 比較陌生，如果這是一個新手問題，我很抱歉：

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

上面的代碼生成了一個聯系人列表，我想以某種方式突出顯示或更改僅為所選（單擊）的聯系人的背景顏色。

我還有以下方法：

data() {
    return {
      contacts: [],
      chosenContacts: []
    };
  },

  methods: {
    async loadContacts() {
      Contacts.getContacts().then(result => {
        this.contacts = result.contacts;
      });
    },

    addContact(contact) {
      this.chosenContacts.push(contact);
    }
  },
  mounted() {
    this.loadContacts();
  }

我想這樣做或者只是為所選/選定的圖標添加一個圖標。

Answer 1

因為你用 vue 標記了這個，所以我的答案將在 css 中，但是使用支票返回你想要的任何東西。

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