这段代码中的问题在于使用了错误的判断方式来确定复选框的选中状态。其中的关键代码是:

checkboxList() {
  if (this.list.length === this.checkboxList.length) {
    this.changeIsAll(true);
  } else {
    this.changeIsAll(false);
  }
}

这里使用了 this.list.length === this.checkboxList.length 来判断是否全选,但实际上 this.listthis.checkboxList 是两个不同的数组对象,即使它们的内容相同,它们的引用也不同,所以比较它们的长度会导致错误的判断结果。

要解决这个问题,可以使用数组的 every 方法来判断两个数组是否具有相同的内容。修改代码如下:

checkboxList() {
  if (this.list.every(item => this.checkboxList.includes(item))) {
    this.changeIsAll(true);
  } else {
    this.changeIsAll(false);
  }
}

这样就可以正确判断复选框的选中状态了,取消一个列表项的复选框只会取消该项,而不会影响其他复选框的状态。

Vue.js 实现待办事项列表:全选功能优化

原文地址: https://www.cveoy.top/t/topic/qnkQ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录