Vue3 Composition API复选框全选功能失效问题求助

你的问题出在两个核心点：一是defineModel的默认值使用了reactive([])，数组类型的响应式数据更适合用ref；二是全选框的状态未与列表选中项同步，且全选逻辑的数组操作方式不够严谨。

下面是修复后的完整代码：

<script setup>
import { ref } from 'vue'

// 数组类型用ref更符合Vue最佳实践，defineModel会自动处理双向绑定
const selected = defineModel({ default: ref([]) });

const items = [1, 2, 3, 4];
const selectAll = () => {
  // 通过选中数量判断全选/取消全选，逻辑更直接
  selected.value = selected.value.length === items.length ? [] : [...items];
};
</script>

<template>
  <div>
    <!-- 绑定checked状态，让全选框与列表选中状态实时同步 -->
    <input type="checkbox" @click="selectAll" :checked="selected.length === items.length" />
    Select all
  </div>
  <div v-for="item in items" :key="item">
    <input type="checkbox" :value="item" v-model="selected" /> {{ item }}
  </div>
  {{ selected }}
</template>

关键改动说明： #

• 响应式数组优化：将reactive([])替换为ref([])，数组类型的响应式数据用ref能避免defineModel处理数组时的潜在引用问题，同时更符合Vue的设计习惯。
• 全选框状态绑定：通过:checked="selected.length === items.length"让全选框的状态自动跟随列表选中项的数量，无论单独操作列表项还是点击全选，全选框的显示都会保持正确。
• 简化全选逻辑：直接通过判断选中数组长度来赋值全选数组或空数组，比splice后push的方式更直观，也能确保响应式更新被正确触发。

修改后，初始全选、单独选择项、再次触发全选等场景都能正常工作。

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