So, I have the following code
<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>
I also have a data point of kinks: []. What I need to be able to do is allow the user to click multiple buttons, and store the ID of each button into a new data point for storage. I also need the button they click (up to 10) to change from gray to red and vice versa.
I have never done this before so my head is swimming around on how to accomplish this. Any help would be grateful!
If I understood you correctly try like following snippet:
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>