如果选择，更改所选离子项目的颜色

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

我要么这样做，要么只为 chosen/selected 个图标添加一个图标。

Answer 1

因为你用 vue 标记了这个，所以我的答案将在 css 中，但是使用检查 return 你想要什么。

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

如果选择，更改所选离子项目的颜色

change color of chosen ion-item if chosen

javascript

ionic-framework

vue.js