如何创建Vue清单时间表

Question

我正在尝试使用Vuejs CDN和Laravel作为后端为一天中的每顿饭创建一个简单的订购时间表清单。

我期望如果星期一选择全部早餐的行为也会被检查。但是发生的是它选中了整个复选框。

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>

我想做一些类似的事情，如果我只想在某些日子里吃午餐，而在其他日子里点所有的东西，然后将其保存到laravel来制定时间表。

我附上小提琴来显示示例。Fiddle Code

您是否可以帮助我找到解决方案，或者您知道我可以尝试的另一种方法。

请告知，谢谢！

Answer 1

之所以不起作用，是因为您没有使用每一项的属性，而是使用了一些全局属性。