VueJS 根据条件隐藏和显示元素

Question

我有一张桌子，在这张桌子里面有每天、工作日、周末、星期一、星期二...和星期五等元素。该表的每个元素都有自己的切换按钮来启用和禁用。这是我的数据函数；

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 {  return !this.sundayCheck;   }
       }
   }

这是我的切换按钮的示例；

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

所以基本上，当我激活单个表格元素的切换时，该特定日期就会启用。我还有一个名为“自定义”的选项。当用户启用自定义切换时，所有日期都将启用并且可以单独管理。到目前为止，一切都很好。这是我的问题；

假设用户启用了工作日和周末，此时我想启用每天切换并再次禁用工作日和周末。或者，如果启用 Weekend，然后用户单击 Everyday，则应再次禁用 Weekend，因为 Everyday 也包含 Weekend。

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

当我编写上面的 if 语句时，什么也没有发生。我尝试启用 Weekdays 并启用 Everyday，期望 Weekdays 将再次被禁用。但这不起作用。所以我想我需要另一个角度来看待整个事情。我该怎么办？

Answer 1

如果我理解你的目的，试试这个

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

您不需要 v-model（此方法用于绑定输入 here for explanation）

//example for toggle-button of everydayCheck
<toggle-button @click="isDisabled(everydayCheck)" color="#82C7EB" :sync="false" :labels="false"/>

methods: {
       isDisabled: function(data){
          this.data = !this.data
       }
   }