Switches: auto off and on with success classes

Get Help
#1

Hello there!

I have a form controlling some entity for edition and creation. That entity (“activity”) has multiple boolean properties, such as “isPlace” and “isEvent”. Those two properties are mutually exclusive: no activity can be both.
So in my form, I want my user to switch on for example the “activity.isPlace” switch, turning off automatically the “activity.isEvent” switch. And the opposite. What is the best way to do that? Through computed properties? Or watchers?

Thank you.

Furthermore, I’m using Vuetify. Does anyone know how to apply a “success” class on a switch label? We can put a color on the switch when it’s on, but on the label too? Is it possible?

Thank you again :slight_smile:

EDIT:
The following seems to be ok, but it’s verbose and ugly-ish

 watch: {
//If isPlace switch is ON, isEvent Switch is OFF
//And vice-versa
'activity.isPlace'(newValue) {
  if (newValue === true) {
    this.activity.isPlace = true;
    this.activity.isEvent = false;
  }
  else {
    this.activity.isPlace = false;
    this.activity.isEvent = true;
  }
},  

'activity.isEvent'(newValue) {
  if (newValue === true) {
    this.activity.isPlace = false;
    this.activity.isEvent = true;
  }
  else {
    this.activity.isPlace = true;
    this.activity.isEvent = false;
  }
}

}

And for the style:

 <style>
   .v-selection-control--dirty label {
       color: rgb(76, 175, 80) !important;
       font-weight: bold;
   }
</style>

So If anyone better than me comes around, don’t hesitate :smile:

#2

There are a few different ways you could handle the mutually exclusive properties of your activity entity in your form.

One approach you could use is to use computed properties to automatically update the state of one switch when the other switch is toggled. For example:

computed: {
  isPlace: {
    get() {
      return this.activity.isPlace;
    },
    set(newValue) {
      this.activity.isPlace = newValue;
      this.activity.isEvent = !newValue;
    }
  },
  isEvent: {
    get() {
      return this.activity.isEvent;
    },
    set(newValue) {
      this.activity.isEvent = newValue;
      this.activity.isPlace = !newValue;
    }
  }
}

You would then use these computed properties in your template, rather than the original properties of the activity object.

Another approach would be using watch, but it is less efficient than computed properties and also makes the code more verbose.

Regarding the styling of switch label, the code you’ve shared is a good starting point, but it’s not the only way to accomplish this. You could also use the v-bind:class directive to bind the v-selection-control–dirty class to a computed property that checks whether the switch is on or off.

<template>
  <v-switch v-model="activity.isPlace" :class="{'v-selection-control--dirty': activity.isPlace }">
    <template v-slot:label>
      <span>Place</span>
    </template>
  </v-switch>
</template>

By doing this, you can add any css class to the label of the switch.

1 Like
#3

Thank you very much :slight_smile: