javascript - 仅在条件vue上复选框

Question

我有这些始终保持选中状态的复选框，但我只想在与它们关联的对象的名为 include 的属性设置为 true 时检查它们。

<小时/>

现在我的问题是所有复选框都保持选中状态，然后当我单击它们时它们会取消选中，然后排除学生。我需要取消选中这些框，除非我选中它们。

我没有在模板上设置选中的属性，所以我不知道为什么默认情况下会选中它们？希望有人能指出我的错误。

我缺席的学生数据:

absentStudents: [{
                    "id": 207,
                    "first_name": "Gabriel De Manuel",
                    "include": false,
                    "avatar": null,
                    "group_id": 24,
                    "full_name": ", Gabriel De Manuel",
                    "exclude": false ,
                    "isGrouped": false, 
                }, {
                    "id": 208,
                    "first_name": "Francisco",
                    "include": false,
                    "avatar": null,
                    "group_id": 24,
                    "full_name": ", Francisco",
                    "exclude": false, 
                    "isGrouped": false, 
                }, {
                    "id": 209,
                    "first_name": "Rosa",
                    "include": false,
                    "avatar": null,
                    "group_id": 24,
                    "full_name": ", Rosa",
                    "exclude": false,
                    "isGrouped": false,  
                }],
            excludeAbsent: false,

//my v-model is created by the following function
 created() {
                this.absentStudentsSelected = this.absentStudents.map(x => x.id);
            },

我已经为我的列表呈现了这些复选框

 <ul>
                    <li v-for="absentStudent in absentStudents" class="list-unstyled">
                        <input type="checkbox" @click="check($event)" v-model="absentStudentsSelected" :value="absentStudent.id">
                        {{ absentStudent.first_name }}
                    </li>
                </ul>

只要 this.excludeAbsent 为 true，请选中每个学生的复选框

check: function(e){  
                    if(this.excludeAbsent === true){ //if we want to include absent students

                    for(var i = 0; i< this.absentStudents.length; i++){
                        if(e.target.value == this.absentStudents[i].id){

                                this.absentStudents[i].include = true 
                            }else{
                                this.absentStudents[i].include = false 
                            }
                        }
                    }

Answer 1

absentStudentsSelected 应在数据选项中初始化为空数组:

let app = new Vue({
  el: "#app",
  data() {
    return {
      absentStudents: [{
        "id": 207,
        "first_name": "Gabriel De Manuel",
        "include": false,
        "avatar": null,
        "group_id": 24,
        "full_name": ", Gabriel De Manuel",
        "exclude": false,
        "isGrouped": false,
      }, {
        "id": 208,
        "first_name": "Francisco",
        "include": false,
        "avatar": null,
        "group_id": 24,
        "full_name": ", Francisco",
        "exclude": false,
        "isGrouped": false,
      }, {
        "id": 209,
        "first_name": "Rosa",
        "include": false,
        "avatar": null,
        "group_id": 24,
        "full_name": ", Rosa",
        "exclude": false,
        "isGrouped": false,
      }],
      excludeAbsent: false,
      absentStudentsSelected: []
    }
  },
  methods: {
    check: function(e) {
      if (this.excludeAbsent === true) {
        for (var i = 0; i < this.absentStudents.length; i++) {
          if (e.target.value == this.absentStudents[i].id) {

            this.absentStudents[i].include = true
          } else {
            this.absentStudents[i].include = false
          }
        }
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="absentStudent in absentStudents" class="list-unstyled">
      <input type="checkbox" @click="check($event)" v-model="absentStudentsSelected" :value="absentStudent.id"> {{ absentStudent.first_name }}
    </li>
  </ul>
 
</div>