En Vuejs3, estoy recorriendo una serie de objetos:
<div v-for="ligne in lignes" :key="ligne.id" :class="{ 'border-b-2':isSelected }" :id="`ligne_${ligne.id}`" > <span @click="select(ligne.id)">X</span> </div> Quiero agregar la clase 'border-b-2' solo a la línea seleccionada, pero no veo cómo hacerlo dinámicamente. Cuando ahora configuro isSelected en verdadero en las herramientas de desarrollo de vue, se aplica ese estilo a todas las líneas.
Como solución alternativa, lo que hago ahora es envolver este código en una función (select(id)) y cambiar la clase html
document.getElementById(`ligne_${id}`).classList.add('border-b-2') Eso parece detallado. ¿Cómo hacer esto, aprovechando la :key o el bucle v-for ?
Intente establecer id en isSelected en lugar de booleano :
const app = Vue.createApp({ data() { return { lignes: [{id: 1}, {id: 2}, {id: 3}], isSelected: [], } }, methods: { select(id) { if(this.isSelected.includes(id)) { this.isSelected = this.isSelected.filter(s => s !== id ) } else this.isSelected.push(id) } } }) app.mount('#demo') <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" /> <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <div v-for="ligne in lignes" :key="ligne.id" :class="isSelected.includes(ligne.id) && 'border-b-2'" > <span @click="select(ligne.id)">X</span> </div> </div>