Vue3组件中使用Object.values()过滤后返回异常数据的原因排查

咱们来拆解下你遇到的问题，核心是toRef的误用和类型定义不匹配，导致failedAlerts没有生成预期的Alert数组。

一、原代码的核心错误 #

1. toRef(props, 'alerts')用错了地方 #

toRef(props, 'alerts')返回的是一个Ref包装对象（带value属性的那种），而不是你传入的原始alerts对象。当你对这个Ref对象调用Object.values()时，你实际遍历的是Ref的内部属性，而不是alerts里的各个Alert值——这直接导致failedAlerts结构完全不符合预期。

2. 类型定义与实际数据不匹配 #

• 最初的alertFactory返回单个Alert对象，但你的alerts props实际是以字符串为键、Alert为值的索引对象（TS里叫Record<string, Alert>），类型不匹配不仅让TS无法正确推断类型，还容易在运行时埋下隐患。
• 用props: ['alerts']这种松散的定义，既没有类型约束也没有必填检查，很难提前发现问题。

二、修正后的关键改进点 #

你后来的修正代码完美解决了这些问题，咱们看下核心改动：

1. 对齐类型定义 #

把alertFactory的返回类型改成Record<string, Alert>，确保它生成的结构和alerts props的实际结构一致：

function alertFactory(): Record<string, Alert> {
  return {
    'dummy index': {
      Extra: '',
      FullTargetName: 'dummy alert',
      Id: '0',
      IsOK: false,
      When: '0',
      Why: 'dummy alert explanation',
    },
  }
}

2. 正确遍历alerts对象 #

去掉了多余的toRef，直接访问props.alerts，并用类型断言as Record<string, Alert>明确其结构，这样Object.values()就能正确遍历到所有Alert值，再过滤得到failedAlerts：

let failedAlerts = computed(() => 
  Object.values(props.alerts as Record<string, Alert>).filter((x: Alert) => !x.IsOK)
)

3. 完善props约束 #

给alerts props添加了明确的类型和必填规则，让组件的输入更清晰，也能在编译阶段提前拦截错误：

props: {
  alerts: {
    type: Object,
    required: true,
  },
}

总结 #

经过这些调整，failedAlerts现在会正确生成为过滤后的Alert数组，Chip组件也能正常渲染每个Alert的FullTargetName了。

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