所以，我有以下代碼
<div class="flex justify-between flex-wrap">
<div v-for="kink in kinks.data" :key="kink.id">
<button type="button" :class="enabled ? 'bg-red-600' : 'bg-gray-600'" class=" m-1 my-2 inline-flex items-center px-3.5 py-2 border border-transparent text-sm leading-4 font-medium rounded-full shadow-sm text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"> {{ kink.name }}</button>
</div>
</div>
我也有一個資料點kinks: []。我需要做的是允許用戶單擊多個按鈕，并將每個按鈕的 ID 存盤到一個新的資料點中進行存盤。我還需要他們單擊的按鈕（最多 10 個）從灰色變為紅色，反之亦然。
我以前從未這樣做過，所以我腦子里一直在想如何做到這一點。任何幫助將不勝感激！
uj5u.com熱心網友回復：
如果我理解正確，請嘗試以下代碼段：
new Vue({
el: "#demo",
data() {
return {
kinks: {data: [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 3, name: 'c'}, {id: 4, name: 'd'}, {id: 5, name: 'e'}]},
selected: []
}
},
methods: {
setBtn(id) {
if (this.selected.includes(id)) {
this.selected.splice(this.selected.findIndex(i => i === id), 1)
} else this.selected.push(id)
},
checkBtn(id) {
return this.selected.includes(id)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y lMz2Mklv18 r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1 68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="demo">
<div class="flex justify-between flex-wrap">
<div v-for="kink in kinks.data" :key="kink.id">
<button type="button" @click="setBtn(kink.id)" :class="checkBtn(kink.id) ? 'bg-red-600' : 'bg-gray-600'" class=" m-1 my-2 inline-flex items-center px-3.5 py-2 border border-transparent text-sm leading-4 font-medium rounded-full shadow-sm text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"> {{ kink.name }}</button>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/453036.html
標籤：javascript Vue.js
上一篇：亂數上限和下限
下一篇：如何創建一個變數，該變數指向一個帶有來自另一個變數的物件的字串？我是一個新手，我正在做ColtSteeles網路開發訓練營