[Vuejs]-VueJS on/off or hide/show toggle button based on other buttons situation

by

0👍

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

this is wrong, because you are returning 3 different things, and this is not supported in js.

trivially you can do:

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

and add a method like this:

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

but this will be not really good code. my advice is trying to generate the input with a v-for statement, starting from an object like this:

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

then you can make a function that is dynamic:

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

and in your function:

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

 }

Leave a comment