VueJS 根据其他按钮情况开/关或隐藏/显示切换按钮

Question

我有一个表格，其中包括一周中的几天以及每天、工作日和周末选项。每行有 2 个select 项目来选择更新的开始时间和结束时间。在每一行的末尾都有一个切换按钮，用于启用和禁用该特定日期。用户可以单独选择每一天，也可以选择每天选项。当他们启用切换时，禁用的选择元素将启用，以便他们可以选择特定日期的时间。

这是它的外观；

如上图，用户可以同时选择 Weekdays 和 Weekend，这应该等于 Everyday 吧？所以我想做的是，当他们同时启用 Weekdays 和 Weekend 时，应该启用 Everyday 切换，而其他两个再次禁用。

这是我的数据和我的方法；

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;   }
      },
   },

else 之前的最后一个else if 说如果weekdayCheck 和weekdaysCheck 为真，则将everydayCheck 设置为true 并将其他设置为假，还是我错了？它不起作用。我错过了什么？

Answer 1

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

这是错误的，因为您要返回 3 个不同的东西，而这在 js 中不受支持。

你可以做的很简单：

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

并添加这样的方法：

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

但这不是很好的代码。我的建议是尝试使用 v-for 语句生成输入，从这样的对象开始：

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

然后你可以制作一个动态的函数：

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

在你的函数中：

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

 }