How to change the border variant of a selected Bootstrap Vue card when clicked in v-for

Question

I have my b-card and v-for showing and functioning mostly as desired, the one issue I'm running into is changing the border-variant of a card that is selected. So far I have tried nesting the v-for that was inside the card in a div container and then using a v-if to check and see if a card has been selected. This code changes the border variant in the way I would like, but I only want the selected card to change its border variant. The code working as described above is shown below.

The selected property is on my data() and I have a function that we'll call functionThatChangesColorAndDoesOtherStuff() where that selected property gets toggled. The method's code is as shown below

data() {
    return {
        teams: [],
        selected: false
    }
}

 functionThatChangesColorAndDoesOtherStuff(stuff) {
    this.selected = !this.selected
    \\Business logic below that does business stuff with the stuff
 }

I've also tried utilizing the index in the v-for, but that didn't even get me to the point where the color was changing at all. This makes me think I'm not using it properly and I would like some help with how I can accomplish this effect. I've checked around SO and haven't seen an example similar to my situation which I will reiterate again. I would like to click the plus button and have the selected card's border variant change.

user_11989189 · Answer

Please take a look at following snippet: you can bind border like: :border-variant="selected === index ? 'success' : 'danger'" , and pass index to function.

new Vue({
  el: '#demo',
  data() {
    return {
      teams: [1,2,3],
      selected: []
    }
  },
  methods: {
    functionThatChangesColorAndDoesOtherStuff(idx) {
      if (this.selected.includes(idx)) {
        this.selected = this.selected.filter(s => s !== idx)
      } else this.selected.push(idx)
    }
  }
})

user_12586607 · Answer

Firstly instead of using v-if and v-else just for a class name use the following

:class=" selected ? 'className1' : 'className2' "

The first value has to be a truthy value. The following are your class names that will be applied based on the value.

How to change the border variant of a selected Bootstrap Vue card when clicked in v-for

2 Answers