How to create a Vue Checklist Schedule

Question

I am trying to create a simple ordering schedule checklist for each meal of the day using Vuejs cdn and Laravel as my backend.

I was expecting a behavior if All is chosen on Monday breakfast to snack will be also checked. But what happens is that it checks the entire checkbox.

Vue.component("day-selector", {
template:
            '<table class="table">' +
            '<tr>\n' +
            '    <td>Day</td>\n' +
            '    <td>All</td>\n' +
            '    <td>Breakfast</td>\n' +
            '    <td>Lunch</td>\n' +
            '    <td>Dinner</td>\n' +
            '    <td>Snack</td>\n' +
            '    </tr>\n' +
            '    <tr v-for="items in daySchedule" :key="items.id">\n' +
            '    <td>{{items.dayname}}</td>' +
            '    <td><input type="checkbox" v-model="chooseAll"></td>' +
            '    <td><input type="checkbox" v-model="breakfastOption"></td>' +
            '    <td><input type="checkbox" v-model="lunchOption"></td>' +
            '    <td><input type="checkbox" v-model="dinnerOption"></td>' +
            '    <td><input type="checkbox" v-model="snackOption"></td>' +
            '    </tr>' +
            '    {{orderSchedule}}</table>',
    props: ['day'],
    data:function() {
        return {
            breakfastOption: false,
            lunchOption: false,
            dinnerOption: false,
            snackOption: false,
            daySchedule:[
                {id:'1',dayname:'Monday', breakfastOption:false,lunchOption:false,dinnerOption:false,snackOption:false},
                {id:'2',dayname:'Tusday', breakfastOption:false,lunchOption:false,dinnerOption:false,snackOption:false},
                {id:'3',dayname:'Wednesday', breakfastOption:false,lunchOption:false,dinnerOption:false,snackOption:false},
                {id:'4',dayname:'Thursday', breakfastOption:false,lunchOption:false,dinnerOption:false,snackOption:false},
                {id:'5',dayname:'Friday', breakfastOption:false,lunchOption:false,dinnerOption:false,snackOption:false},
            ],
            orderSchedule:[],
        };
    },
    computed:{
        chooseAll:{
            get() {
                return this.breakfastOption || this.lunchOption || this.dinnerOption || this.snackOption
            },
            set:function (checkedValue) {
                return this.breakfastOption = this.lunchOption = this.dinnerOption = this.snackOption = checkedValue;
            }
        }
    }
});


Vue.component('day-selector-template');



var app = new Vue({
    el:'#app',
    data:function(){
        return{
       
        }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.1/vue.js"></script>


<div id="app">
   <div class="col-md-5 order-md-3 mb-5">
                <div class="card">
                <day-selector ></day-selector>
                </div>
            </div>
</div>

I would want to do something like if I want to only eat lunch on some days and order all in other days and then be able to save it to laravel to make schedules.

I have attached a fiddle to show the example. Fiddle Code

Would you be able to help me find a solution on this or if you know another way I can try.

Please Advise, Thank you!

Answer 1

The reason why it's not working, is because you're not using each item's properties, but some global one.

Change your HTML part to this (notice the items. and new method called toggleAll

'    <td><input type="checkbox" @change="toggleAll(items, $event.target.checked)"></td>' +
'    <td><input type="checkbox" v-model="items.breakfastOption"></td>' +
'    <td><input type="checkbox" v-model="items.lunchOption"></td>' +
'    <td><input type="checkbox" v-model="items.dinnerOption"></td>' +
'    <td><input type="checkbox" v-model="items.snackOption"></td>' +

Add a method to actually trigger the toggling

methods: {
    toggleAll(input, checked) {
      for (let key in input) {
        console.log(typeof input[key] === "boolean")
          if (typeof input[key] === "boolean") {
            input[key] = checked
        }
      }
  }
}

and get rid of the useless data properties

breakfastOption: false,
lunchOption: false,
dinnerOption: false,
snackOption: false,

https://jsfiddle.net/pfkh5bu9/1/