Entonces, tengo el siguiente código
<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> También tengo un punto de datos de kinks: [] . Lo que necesito poder hacer es permitir que el usuario haga clic en varios botones y almacene la identificación de cada botón en un nuevo punto de datos para el almacenamiento. También necesito el botón en el que hacen clic (hasta 10) para cambiar de gris a rojo y viceversa.
Nunca he hecho esto antes, así que mi cabeza da vueltas sobre cómo lograrlo. ¡Cualquier ayuda será de gran utilidad!
Si te entendí correctamente, prueba con el siguiente fragmento:
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>