Toggle button in VueJS that dynamically shows/hides based on the state of other buttons

Question

Toggle button in VueJS that dynamically shows/hides based on the state of other buttons

In my table, I have included options for the days of the week such as Everyday, Weekdays, and Weekend. Each row contains 2 select items to choose start and end times for updates. Additionally, there is a toggle button at the end of each row that enables or disables the specific day. Users can individually select each day or choose the Everyday option for all days. When the toggle is enabled, the disabled select elements become active so users can input the time for that particular day.

Here is a visual representation: https://i.stack.imgur.com/OsejS.png

Users can select both Weekdays and Weekend together, which essentially covers all days just like the Everyday option. My goal is to automatically enable the Everyday toggle when both Weekdays and Weekend are selected, disabling the other two options. However, the method I have implemented does not seem to work as intended. Here is the data and method I am using:

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

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 if(this.weekdaysCheck && this.weekendCheck){
             return this.everydayCheck, !this.weekdaysCheck, !this.weekendCheck;
         }
         else {  return !this.sundayCheck;   }
      },
   },

Before falling back to the else statement, the last else-if condition should turn on the everydayCheck and disable the others if both weekendCheck and weekdaysCheck are true. However, it appears to be malfunctioning. Any insights on what might be missing?

css vue.js toggle show-hide

Answer 1

Answer №1

if(this.weekdaysCheck && this.weekendCheck){
             return this.everydayCheck, !this.weekdaysCheck, !this.weekendCheck;
         }

This approach is incorrect because you are trying to return three different values in JavaScript, which is not supported. A better way to handle this is by refactoring the code as follows:

You can simplify it like this:

else if(this.weekdaysCheck && this.weekendCheck){
   changeWeek();
   return
}

Create a method like this:

changeWeek: function(){
  this.everydayCheck = !this.everydayCheck;
  this.weekdaysCheck = !this.weekdaysCheck;
  this.weekendCheck = !this.weekendCheck;
}

However, this might not be the best practice. I suggest generating the input dynamically using a v-for statement with an object structure like this:

data(){
 return{
  inputs: [
   {
    id: "everydaycheck",
    active: false,
    ...
   },
   ...
  ]
 }
}

Then create a dynamic function:

<template v-for="input in inputs">
  <input @click="isDisabled($event) v-model="input.active" :key="input.id" 
  id="input.id">
</template>

In your function:

methods: {
 isDisabled(event) {
  let id=event.target.getAttribute('id');
  inputs.forEach((input) => {
  if(input.id == id) {
   input.active=!input.active;
  }
  });

 }
}

Answer 2

if(this.weekdaysCheck && this.weekendCheck){
             return this.everydayCheck, !this.weekdaysCheck, !this.weekendCheck;
         }

This approach is incorrect because you are trying to return three different values in JavaScript, which is not supported. A better way to handle this is by refactoring the code as follows:

You can simplify it like this:

else if(this.weekdaysCheck && this.weekendCheck){
   changeWeek();
   return
}

Create a method like this:

changeWeek: function(){
  this.everydayCheck = !this.everydayCheck;
  this.weekdaysCheck = !this.weekdaysCheck;
  this.weekendCheck = !this.weekendCheck;
}

However, this might not be the best practice. I suggest generating the input dynamically using a v-for statement with an object structure like this:

data(){
 return{
  inputs: [
   {
    id: "everydaycheck",
    active: false,
    ...
   },
   ...
  ]
 }
}

Then create a dynamic function:

<template v-for="input in inputs">
  <input @click="isDisabled($event) v-model="input.active" :key="input.id" 
  id="input.id">
</template>

In your function:

methods: {
 isDisabled(event) {
  let id=event.target.getAttribute('id');
  inputs.forEach((input) => {
  if(input.id == id) {
   input.active=!input.active;
  }
  });

 }
}

Toggle button in VueJS that dynamically shows/hides based on the state of other buttons

Answer №1

Similar questions

Tables that are not only responsive but also friendly to mobile

Formatting that differs based on whether the content appears on the left

Efficient PHP caching solution for optimizing JavaScript and CSS performance

What is the best way to add a background image to a div without a fixed height in order for it to span the full width and

Best practices for effectively implementing Vuex getters within the Nuxt Vue Composition API

Executing JavaScript Code Through Links Created Dynamically

Exclusive Hover Effect: Applying Hover Styles Only to Child Elements, Independent from Parent Hover

Troubleshooting parameter issues with Vue Router on page refresh

Locate a specific class inside a div and switch the CSS style to hide one element and reveal another

Step-by-step guide on incorporating CSS box-shadow with the .style JavaScript property

How can Vue define the relationship on the client-side when submitting a post belonging to the current user?

Avoid relying on automated CSS generation

Include the circle.css file in the Angular 4 project by loading it in the head section of the

VueJS: Dynamically Change Events in FullCalendar Based on User Input

Tips for animating elements to move on scroll while navigating through the webpage

What is the best way to incorporate an icon as a label in a Vuetify select dropdown menu?

Aligning text inputs inline within a Bootstrap form for a cleaner and organized

Is it possible to incorporate a label within a dropdown menu (<select>)?

Lint error: Unrecognized attribute 'text-fill-color' in CSS (unknown properties)

A guide to replacing or customizing standard components in ReactJS