jeudi 26 novembre 2020

VueJS hide and show elements based on conditions

I have a table and inside of this table there are elements like Everyday, Weekdays, Weekend, Monday, Tuesday... and Friday. Every element of this table has its own toggle button to be enabled and disabled. Here is my data function;

data() {
       return {
         everydayCheck: false,
         weekdaysCheck: false,
         weekendCheck: false,
         customCheck: false,
         mondayCheck: false,
         tuesdayCheck: false,
         wednesdayCheck: false,
         thursdayCheck: false,
         fridayCheck: false,
         saturdayCheck: false,
         sundayCheck: false
         }
      },

And this is my method;

methods: {
       isDisabled: function(){
          if(this.everydayCheck){   return !this.everydayCheck;   }
          else if(this.weekdaysCheck){   return !this.weekdaysCheck;   }
          else if(this.weekendCheck){   return !this.weekendCheck;   }
          else if(this.customCheck){   return !this.customCheck;   }
          else if(this.mondayCheck){   return !this.mondayCheck;   }
          else if(this.tuesdayCheck){   return !this.tuesdayCheck;   }
          else if(this.wednesdayCheck){   return !this.wednesdayCheck;   }
          else if(this.thursdayCheck){   return !this.thursdayCheck;   }
          else if(this.fridayCheck){   return !this.fridayCheck;   }
          else if(this.saturdayCheck){   return !this.saturdayCheck;   }
          else {  return !this.sundayCheck;   }
       }
   }

And here is an example of my toggle buttons;

<toggle-button v-model='sundayCheck' @click="isDisabled"  :value="false" color="#82C7EB" :sync="false" :labels="false"/>

So basically, when I activate the toggle of an individual table element, that specific day becomes enabled. I also have an option called "Custom". When the user enables the Custom toggle, all the days become enabled and can be managed individually. So far so good. And here is my question;

Let's say the user enabled Weekdays and Weekend, at this point I want to enable the Everyday toggle and disable the Weekdays and Weekend again. Or if Weekend is enabled and then user clicks Everyday, Weekend should be disabled again because Everyday wraps Weekend as well.

  else if(this.everydayCheck == true){
     return this.weekdaysCheck = false;
  }

When I write the above if statement, nothing happens. I try to enable Weekdays and enable the Everyday expecting that the Weekdays will be disabled again. But that does not work. So I think I need another angle to see the whole thing. What should I do?

Aucun commentaire:

Enregistrer un commentaire