Vuejs : how to bind class within a v-for loop

Question

In Vuejs3, I'm looping over an array of objects :

<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>

I want to add the class 'border-b-2' only to the line selected line, but I don't see how to do that dynamically. When I now set isSelected to true in the vue devtools, all lines get that style applied.

As a workaround, what I now do is wrapping this code in a function (select(id)) and change the html class

document.getElementById(`ligne_${id}`).classList.add('border-b-2')

That seems verbose. How to do this, leveraging on the :key or the v-for loop?

should only one div be selected? or is select supposed to be toggling the state of the div? — Bravo
– Bravo, Commented Jun 8, 2022 at 0:34

Nikola Pavicevic · Accepted Answer · 2022-06-08 05:12:58Z

1

Try to set id in isSelected instead of boolean:

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>

edited Jun 8, 2022 at 5:12

answered Jun 7, 2022 at 21:47

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

thiebo Over a year ago

Thanks you. This allow to select only one ligne of the array, not 2 or more at once. I guess I need to write a method for that.

Nikola Pavicevic Over a year ago

@thiebo hey mate , check now please I updated my answer

thiebo Over a year ago

works! Really cool

Collectives™ on Stack Overflow

Vuejs : how to bind class within a v-for loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related