Question

我的页面顶部有一个“全选”复选框，单击该页面时，它应该已经选中了所有复选框。这是我的代码：

    <div class="columns bottom-border">
        <div class="column">Student</div>
        <div><a v-on:click="revokePoints()">Revoke</a><br/><input type="checkbox" v-model="selectAll">Select All</div>
    </div>

    <div class="columns" v-for="(behavior) in sortBehaviors(behaviorList)" :key="behavior._id">
        <div class="column">{{ behavior.studentID.firstName }} </div>
        <div class="column is-1"><center><input type="checkbox"  :value="setCheckedValue(behavior.dataType,behavior._id,behavior.studentID._id,behavior.actionDate)" :id="setCheckedValue(behavior.dataType,behavior._id,behavior.studentID._id,behavior.actionDate)" v-model="checkedIDs"></center></div>
    </div>

    data() {
        return {
            positiveName: '',
            behaviorList: [],
            checkedIDs: [],
            selected: []
        };
    },
    computed:{     
        selectAll: {
            get: function () {
                return this.behaviorList ? this.selected.length == this.behaviorList.length : false;
            },
            set: function (value) {
                var mySelected = [];
                let self = this;
                if (value) {
                    this.behaviorList.forEach(function (behavior) {
                        var getDataType = behavior.dataType
                        var getID = behavior._id
                        var getStudentID = behavior.studentID._id
                        var getActionDate = behavior.actionDate
                        var getGeneratedID = self.setCheckedValue(getDataType,getID,getStudentID,getActionDate);
                        mySelected.push(getGeneratedID);
                    });
                }
                self.selected = mySelected;
                console.log("self selected")
                console.log(self.selected)
            }
        }
    },    
    methods: {
        setCheckedValue(dataType,id,studentID,actionDate){
            return "1:" + dataType + "|2:" + id + "|3:" + studentID + "|4:" + actionDate
        },
        revokePoints(){
            var pointsToRevoke = this.checkedIDs;

            console.log("pointsToRevoke")
            console.log(pointsToRevoke)
        }

当我单击Select All checkbox时，控制台将显示self.selected将具有所有复选框的ID。但是问题是未选中所有显示值的复选框...

Answer 1

由于您的代码未完成，因此很难提供帮助。但是我会采取不同的方法。希望this codepen可以为您提供帮助。

const list = [
  { id: 1, name: 'New York', checked: true },
  { id: 2, name: 'Sydney', checked: false },
  { id: 3, name: 'London', checked: false },
  { id: 4, name: 'Chicago', checked: true }
]

new Vue({
  el: '#app',
  data() {
    return {
      list,
      isAllChecked: false
    };
  },
  methods: {
    checkAll: function() {
      this.list = this.list.map(city => ({ ...city,
        checked: !this.isAllChecked
      }))
      this.isAllChecked = !this.isAllChecked
    }
  },

  computed: {
    getAllCheckedIDs: function() {
      return this.list.filter(city => city.checked).map(city => city.id)
    },
    getNotAllCheckedIDs: function() {
      return this.list.filter(city => !city.checked).map(city => city.id)
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="city in list" :key="city.id">
      <label>
				{{city.name}}
				<input type="checkbox" v-model="city.checked" />
			</label>
    </li>
  </ul>
  <button @click="checkAll">Check all</button>
  <br/>
  <div>Checked IDs: {{getAllCheckedIDs}}</div>
  <div>Not Checked IDs: {{getNotAllCheckedIDs}}</div>
</div>

可以选择所有复选框，其值由计算方法生成

1 个答案: