组件中checkbox里面全选可以但是单列全选却出问题

Question

就是checkbox里面出现的全选可以做到，但是单列全选就会出问题。我就大概贴下核心代码吧！全部代码太多了。文件是单文件组件。

    <div class="top">
        <span><input type="checkbox" :checked="all" @change="allChoose"/>全选/反选</span>
        <div class="table">
          <div class="unit" v-for="(item, index) in days">
            <input type="checkbox" v-model="item.checked" @change="checkDates(index)"/>
            <p v-if="pattern === 'week'">{{ item.name }}</p>
          </div>
          <div class="date-unit" v-if="pattern === 'month'" v-for="(item, index) in dates">
            <input type="checkbox" v-model="item.checked" @change="checkDays(index)"/>
            <p>{{ index + 1 }}日</p>
          </div>
        </div>
      </div>
      

下面是逻辑代码

     export default {
    props: {
      required: {
        type: Boolean,
        default: false
      },
      label: {
        type: String
      },
      day: {
        type: Array
      },
      date: {
        type: Array
      },
      pattern: {
        type: String,
        default: 'month'
      },
      work: {
        type: String,
        default: '1'
      },
      rest: {
        type: String,
        default: '1'
      }
    },
    computed: {
      dates () {
        let result = []
        if (this.date) {
          result = _.cloneDeep(this.date)
        } else {
          for (var i = 0; i < 31; i++) {
            let temp = {
              checked: false
            }
            result.push(temp)
          }
        }
        return result
      },
      days () {
        let result = []
        if (this.day) {
          result = _.cloneDeep(this.day)
        } else {
          result = [
            {name: '星期一', checked: false},
            {name: '星期二', checked: false},
            {name: '星期三', checked: false},
            {name: '星期四', checked: false},
            {name: '星期五', checked: false},
            {name: '星期六', checked: false},
            {name: '星期日', checked: false}
          ]
        }
        return result
      }
    },
    data () {
      return {
        all: false,
        pickerOptions0: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        },
        pickerOptions1: {
          shortcuts: [{
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        value1: ''
      }
    },
    methods: {
      allChoose () {
        this.all = !this.all
        for (let i = 0; i < this.days.length; i++) {
          if (this.all) {
            this.days[i].checked = true
          } else {
            this.days[i].checked = false
          }
        }
        for (let i = 0; i < this.dates.length; i++) {
          if (this.all) {
            this.dates[i].checked = true
          } else {
            this.dates[i].checked = false
          }
        }
//        this.getValue()
      },
      checkDays (index) {
        this.days[index % 7].checked = true
        for (let j = index; j < this.dates.length; j = j + 7) {
          if (!this.dates[j].checked) {
            this.$set(this.days, (j % 7), {checked: false})
//            this.days[j % 7].checked = false
//            console.log(this.days[j] + '%%%%%%%j')
            break
          }
        }
        this.$nextTick(() => {
//          console.log('days already updated!')
          this.getValue()
        })
      },
      checkDates (index) {
        for (let j = index; j < this.dates.length; j = j + 7) {
//          this.dates[j].checked = this.days[index].checked
          this.$set(this.dates, j, this.days[index])
//          console.log(this.dates[j].checked + '' + index)
        }
        this.$nextTick(() => {
//          console.log('dates already updated!')
//          this.getValue()
        })
      }

  求解各位大神啊  ！还有我想说那个数组的checked的属性已经改为true了，就是dom不怎么显示
    困扰了我好几天了

Answer 1

v-for的时候加上:key属性，绑定唯一的值