如何创建 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 来展示示例。 Fiddle Code

你能帮我找到解决办法吗？或者如果你知道另一种方法我可以试试。

请指教，谢谢！

Answer 1

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

将您的 HTML 部分更改为此（注意 items. 和名为 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>' +

添加一个方法来实际触发切换

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

并删除无用的数据属性

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

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

如何创建 Vue 清单计划

How to create a Vue Checklist Schedule

html

cdn

list

vue.js