I'm wanting to change the color of the chip when I click on the chip itself and change it back when clicked again.

So far I have not been able to achieve that. I know that :color can be used to dynamically change the color initially, but not sure after the click.

I have an array to store the selected values.

data () {
   return {
     restrictions = ['Restriction 1','Restriction 2','Restriction 3','Restriction 4'],
     selectedRestrictions = []
   }
},
methods(){
  handleChipColor(){
    return 'primary';
  },
  selectRestriction(restriction){
      const el = this.selectedRestrictions.findIndex(el => el === restriction);
      el < 0 ? this.selectedRestrictions.push(restriction) :    this.selectedRestrictions.splice(el,1);
    }
  }

<v-chip class="margin" :color="handleChipColor" v-for="restriction in restrictions"  @click="selectRestriction(restriction)" :key="restriction">{{restriction}}</v-chip>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I'm able to manipulate the array to have the colors of the chips selected, I'm just not 100% sure how to update the colors on the chips.

Any help is appreciated.

CodePudding user response：

binding the condition directly to the color prop should do it for example try this:

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      restrictions: ['Restriction 1', 'Restriction 2', 'Restriction 3', 'Restriction 4'],
      selectedRestrictions: []
    }
  },
  methods: {
    selectRestriction(restriction) {
      const el = this.selectedRestrictions.findIndex(el => el === restriction);
      el < 0 ? this.selectedRestrictions.push(restriction) : this.selectedRestrictions.splice(el, 1);
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-chip-group>
      <v-chip v-for="(item, i) in restrictions" :color="selectedRestrictions.includes(item) ? 'error' : 'primary'" @click="selectRestriction(item)" :key="i">{{item}}</v-chip>
    </v-chip-group>
  </v-app>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

you can also wrap the condition in a method and then bind the method to the color prop like this:

handleColor(item) {
  return this.selectedRestrictions.includes(item) ? 'error' : 'primary';
}

template:

<v-chip v-for="(item, i) in restrictions" :color="handleColor(item)" ...

CodePudding user response：

I realized all I needed to do is check the array on the function call for the :color attribute.

checkIfRestrictionSelected(restriction){
   // Pick the two colors to alternate 
   return this.selectedRestrictions.find(el => el === restriction) ? 'primary' : 'secondary';
}

<v-chip class="margin" :color="checkIfRestrictionSelected(restriction)" @click="selectRestriction(restriction)" v-for="restriction in restrictions" :key="restriction">{{restriction}}</v-chip>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>