Vue3响应式Prop更新问题：isSelected如何随selectedCourses动态更新

你的问题核心是Vue响应式追踪未覆盖isSelected函数的执行逻辑：虽然函数内部依赖了selectedCourses，但直接将isSelected(course)作为prop传入时，Vue无法自动关联函数执行与数组变化，导致数组更新后子组件的isSelected prop不会重新计算。

下面提供两种适配你需求的解决方案：

方案一：用计算属性预生成带选中状态的课程数组 #

这是最稳妥且高效的方式，通过计算属性提前为每个课程附加选中状态，Vue会自动追踪selectedCourses的变化并更新计算结果：

<script setup lang="ts">
import { ref, computed } from 'vue'

const allCourses = ref([/* 你的课程数据源 */])
const selectedCourses = ref<Array<Object>>([])

// 预计算每个课程的选中状态
const coursesWithSelection = computed(() => {
  return allCourses.value.map(course => ({
    ...course,
    // 建议用课程唯一标识（如id）匹配，避免对象引用不一致导致的判断错误
    isSelected: selectedCourses.value.some(e => e.id === course.id)
  }))
})

const handleSelect = (course: any) => {
  const exists = selectedCourses.value.some(e => e.id === course.id)
  if (exists) {
    // 移除已选中课程
    selectedCourses.value = selectedCourses.value.filter(e => e.id !== course.id)
  } else {
    // 添加选中课程
    selectedCourses.value.push(course)
  }
}
</script>

<template>
  <mychildcomponent 
    v-for="course in coursesWithSelection" 
    :key="course.id" <!-- 务必添加唯一key优化渲染 -->
    :isSelected="course.isSelected" 
    @toggle-select="handleSelect"
  />
</template>

方案二：强制触发响应式依赖追踪（不推荐，仅作备选） #

若不想修改原数组结构，可以通过给isSelected函数添加一个无用的依赖参数，让Vue感知到该函数依赖selectedCourses：

<template>
  <mychildcomponent 
    v-for="course in allCourses" 
    :key="course.id"
    :isSelected="isSelected(course, selectedCourses)" 
    @toggle-select="handleSelect"
  />
</template>

对应修改函数：

const isSelected = (_courseData: any, _trigger: any): boolean => {
  // 依旧用唯一标识匹配更可靠
  return selectedCourses.value?.some(e => e.id === _courseData.id)
}

这种方式仅靠“无效参数”触发更新，代码可读性较差，优先推荐方案一。

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