Vuetify中切换v-switch组件时如何实现全选所有复选框

1. 调整模板中复选框的绑定逻辑 #

你当前的v-checkbox仅用了单向绑定的:input-value，无法响应数据变更同步更新选中状态，需要修改为双向绑定到每一项的checked字段：

<v-list-item v-for="(item, index) in itemsEducators" :key="index">
  <v-list-item-action>
    <!-- 修改为v-model双向绑定item.checked属性 -->
    <v-checkbox :key="item.title" v-model="item.checked"> </v-checkbox>
  </v-list-item-action>
  <v-list-item-content>
    <v-list-item-title>{{ item.title }}</v-list-item-title>
    <v-list-item-subtitle>{{ item.institution }} </v-list-item-subtitle>
  </v-list-item-content>
</v-list-item>

如果你的项目是Vue2，且itemsEducators初始化时部分子项没有checked字段，建议初始化时就给每个子项都设置默认的checked: false属性，避免响应式更新失效。 #

2. 完善handleChanging方法逻辑 #

直接遍历itemsEducators数组，把每一项的checked属性同步为selectAll的当前值即可：

methods: {
  handleChanging() {
    this.itemsEducators.forEach(item => {
      // 如果Vue2下出现响应式更新失效的问题，替换为 this.$set(item, 'checked', this.selectAll)
      item.checked = this.selectAll
    })
  }
}

可选优化：单个复选框操作同步全选开关状态 #

如果需要实现手动取消某一个复选框时自动关闭全选开关、手动选中所有复选框时自动打开全选开关，可以按以下调整：

1. 给v-checkbox添加change事件监听：

<v-checkbox :key="item.title" v-model="item.checked" @change="calcSelectAllStatus"> </v-checkbox>

2. 添加对应计算方法：

methods: {
  // 原有handleChanging方法不变，新增以下方法
  calcSelectAllStatus() {
    this.selectAll = this.itemsEducators.every(item => item.checked === true)
  }
}

内容的提问来源于stack exchange，提问作者Nina