我對 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();
}
我想要么這樣做，要么只為選定/選定的圖示添加一個圖示。
uj5u.com熱心網友回復：
由于您使用 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);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/450289.html
標籤：javascript Vue.js 离子框架