问题是点击 多选框之后没有改变视图

在拿到数据回填后，点击多选框没有改变视图，代码如下：
demo ：


数据：

方法：

当我点击多选框之后

打印的数组

视图

原因以及解决

我就发现数据其实是已经改变了的，但是他的视图却没有改变，因此我怀疑是因为 vue 会监听不到数组的变化，故此使用 this.$forceUpdate() 来强制刷新页面，问题就解决了。

    admissionChange (checkedValues) {
      this.$set(this.form, 'admissionModeArr', checkedValues)
      this.$forceUpdate()
      this.setCkeckBox = Boolean(this.form.admissionModeArr.includes('3'))
      console.log(this.form.admissionModeArr)
    },

为什么我点击复选框，不会选中，需要操作一下其他组件才会出现勾选呢？？搞了好久，后来看到一个帖子，解决了。特此记录一下

v-model 是二级字段，修改 v-model 为一级字段可解决，即 v-model="data.channel" 修改为 v-model="channel" ，然后在 onCheckboxChange() 再把值赋给 data.channel 。

参考自(47条消息) a-checkbox-group 赋值后不能点击问题_hy_ethel的博客-CSDN博客_a-checkbox

效果

如图所示，这是一个弹窗，弹窗中是多选框。而且不仅包含了多选框，还包含了时间组件

实现代码

页面

<template>
  <c-modal
    title="资质"
    centered
    :destroyOnClose="true"
    :visible="visible"
    :loading="loading"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleClose"
  >
    <a-form-model
      :label-col="{ span: 24 }"
      :wrapper-col="{ span: 24 }"
      ref="StaffQualification"
      :model="form"
      :rules="rules"
      :validate-messages="validateMessages"
    >
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item label="资质" prop="qualification">
            <a-checkbox-group v-model="form.qualification">
              <a-row>
                <a-col style="margin-bottom: 10px" v-for="item in qualificationOptions" :key="item.qualification.id">
                  <a-checkbox style="width: 200px" :value="item">{{ item.qualification.name }}</a-checkbox>
                  <a-date-picker :default-value="item.qualificationStartAt" v-model="item.qualificationStartAt" :format="dateFormat" placeholder="开始日期" style="margin-left: 10px"/>
                  <a-date-picker :default-value="item.qualificationEndAt" v-model="item.qualificationEndAt" :format="dateFormat" placeholder="结束日期" style="margin-left: 10px"/>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </c-modal>
</template>

js

import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

export default {
  data () {
    return {
      loading: false,
      visible: false,
      confirmLoading: false,
      form: {
          qualification: []
      },
      qualificationDate: null,
      rules: {},
      qualificationOptions: [],
      dateFormat: 'YYYY-MM-DD'
    }
  },
  methods: {
    async edit (record) {
      this.visible = true
      this.loading = true
      try {
          this.form.id = record.id
          // 从后台取到资质列表
          const arr = await xxx.query(
              {},
              { showLoading: false, showSuccess: false, showFailure: false }
          )
          // 定义两个list分别存下拉框的选项 和 绑定的选项
          this.qualificationOptions = []
          this.form.qualification = []
          arr.forEach(optionsMap => {
              const optionsNode = {
                  id: null,
                  qualification: {
                      id: optionsMap.id,
                      name: optionsMap.name
                  },
                  qualificationEndAt: null,
                  qualificationStartAt: null
              }
              // 回显
              record.staffQualifications.forEach(map => {
                  if (optionsNode.qualification.id === map.qualification.id) {
                      optionsNode.id = map.id
                      optionsNode.qualificationEndAt = moment(map.qualificationEndAt, 'YYYY-MM-DD')
                      optionsNode.qualificationStartAt = moment(map.qualificationStartAt, 'YYYY-MM-DD')
                      this.form.qualification.push(optionsNode)
                  }
              })
              this.qualificationOptions.push(optionsNode)
          })
      } catch (error) {
        console.error(error)
      }
      this.loading = false
    },
    handleSubmit () {
          this.confirmLoading = true
          const staffQualifications = []
          this.form.qualification.forEach(item => {
              const qualification = {
                  id: item.qualification.id
              }
              const staffQualification = {
                  qualification: qualification,
                  qualificationStartAt: item.qualificationStartAt !== undefined ? item.qualificationStartAt.format('YYYY-MM-DD HH:mm:ss') : null,
                  qualificationEndAt: item.qualificationEndAt !== undefined ? item.qualificationEndAt.format('YYYY-MM-DD HH:mm:ss') : null
              }
              staffQualifications.push(staffQualification)
          })
          const requestModel = {
            id: this.form.id,
            staffQualifications: staffQualifications
          }
          try {
            // 提交
            await xxx.updateQualification(requestModel, { showLoading: false })
            this.confirmLoading = false
            this.handleClose()
            this.$emit('ok')
          } catch (error) {
            this.confirmLoading = false
          }
        } else {
          return false
        }
    },
    handleClose () {
      if (this.$refs['StaffQualification'] !== undefined) {
        this.$refs['StaffQualification'].resetFields()
      }
      this.visible = false
    }
  }
}
</script>