Vuetify v-list-item-group全选复选框点击事件重复触发问题求助

你遇到的toggleCompleteSelection执行两次的问题，本质是因为给v-checkbox绑定了@click事件。Vuetify的v-checkbox组件内部由多个DOM元素构成（比如复选框图标、隐藏的原生input等），点击复选框时，点击事件会在内部元素间冒泡，导致@click被触发两次。而且@click监听的是点击动作，而非复选框的状态变化，这也不符合我们的核心需求——我们需要的是当复选框选中状态改变时执行逻辑，而非单纯的点击动作。

1. 替换事件绑定：用@change代替@click #

把表头复选框的@click="toggleCompleteSelection"改成@change="toggleCompleteSelection"。@change是专门监听表单控件状态变化的事件，只会在复选框的选中状态真正改变时触发一次，能完美避免多次执行的问题。

修改后的表头复选框代码：

<v-checkbox 
  :indeterminate="someNodesSelected" 
  :input-value="allNodesSelected" 
  @change="toggleCompleteSelection" 
/>

2. 修正deleteNodes方法里的笔误 #

你的deleteNodes方法里存在一个变量名错误：this.selectedQueueIds = []; 应该是this.selectedNodeIds = [];（多写了Queue），否则删除节点后选中状态无法清空，会导致后续全选/部分选中的状态判断出错。

修正后的方法：

deleteNodes() {
  for (const nodeId of this.selectedNodeIds) {
    this.deleteNode(nodeId);
  }
  this.selectedNodeIds = []; // 修正变量名
}

可选优化（非必须） #

如果一定要保留@click绑定，可以给事件加上.stop修饰符阻止冒泡：@click.stop="toggleCompleteSelection"，但更推荐使用@change，因为它更贴合复选框的状态变更场景，逻辑更清晰。

修改完成后，点击表头的全选复选框时，toggleCompleteSelection只会执行一次，全选/取消全选/不确定状态的切换都会正常工作，删除选中节点后的状态也会正确更新。

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