Vue3中使用ref声明的数组无法删除值问题求助

AI 小北

2026-8-22

问题分析与解决

你的代码里删除逻辑的核心问题是：生成了过滤后的新数组，但没有将其赋值回ref的value属性，导致原数组未被更新。

在updateSelectedPartnership函数的删除分支中，filter方法返回了剔除目标值的新数组，但你仅打印了这个新数组，没有覆盖原有的selectedPartnershipCategories.value，所以原ref数组的内容完全没变化。

修正方案

方案1：直接赋值过滤后的新数组（推荐）

修改删除分支代码，将过滤结果赋值给ref的value，触发响应式更新：

const updateSelectedPartnership = (partnershipId: string, categorySelected: boolean) => {
  if (categorySelected && !selectedPartnershipCategories.value.includes(partnershipId)) {
    return selectedPartnershipCategories.value.push(partnershipId)
  }
  if (!categorySelected && selectedPartnershipCategories.value.includes(partnershipId)) {
    const clearedArray = selectedPartnershipCategories.value.filter((i) => {
      return i !== partnershipId
    })
    // 关键：将新数组赋值回ref的value
    selectedPartnershipCategories.value = clearedArray
    console.log(clearedArray)
  }
}

方案2：使用`splice`修改原数组

如果偏好直接修改原数组而非生成新数组，可以用splice方法：

const updateSelectedPartnership = (partnershipId: string, categorySelected: boolean) => {
  if (categorySelected && !selectedPartnershipCategories.value.includes(partnershipId)) {
    return selectedPartnershipCategories.value.push(partnershipId)
  }
  if (!categorySelected && selectedPartnershipCategories.value.includes(partnershipId)) {
    const index = selectedPartnershipCategories.value.indexOf(partnershipId)
    if (index !== -1) {
      selectedPartnershipCategories.value.splice(index, 1)
    }
    console.log(selectedPartnershipCategories.value)
  }
}