我對 Vuejs 很陌生，我想知道如何在 Vuejs 中完成這項作業
我有一組不同的資料：
data() {
return {
recents: false,
frontend: false,
backend: false,
devops: false,
tutoriais: false,
};
},
當我單擊一個按鈕時，它會呼叫openOptions()并將特定屬性更改為 true 或 false。
openOptions(e) {
const optionClicked = e.target.text.toLowerCase();
this[optionClicked] = !this[optionClicked];
},
但是，我不能有 2 個屬性為真。我需要將其他所有內容都設定為，false但我很難理解如何進行這項作業。所以基本上我需要的是
set the one I clicked to true
and the rest to false
任何人都可以幫助我嗎？
uj5u.com熱心網友回復：
您可以首先創建一個物件作為單個物體，我使用了一個名稱為的物件 collection
現場演示
data() {
return {
collection: {
recents: false,
frontend: false,
backend: false,
devops: false,
tutoriais: false,
},
};
},
然后，您可以在每個元素上附加單擊偵聽器（如果需要，您還可以在其父級上附加單擊偵聽器）
<button
v-for="[key, value] in Object.entries(this.collection)"
:key="key"
v-on:click="() => openOptions(key)"
>
{{ key }}
{{ value }}
</button>
當用戶點擊 any 時，button只有它的值將設定為true，其余的false為：
openOptions(clickedKey) {
Object.keys(this.collection).forEach((key) => {
this.collection[key] = key === clickedKey ? true : false;
});
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/346972.html
標籤：javascript Vue.js 前端