Vue组件计算属性filteredInvalidRules始终返回undefined的解决方法

我希望在计算属性中过滤指定prop（validationResult），该prop在开发者工具中显示有可用值，但计算属性filteredInvalidRules始终返回undefined。以下是我的代码：

export default {  
name: "Validation",  
props: {    
validationResult: {      
type: Object,     
required: true,   
 },  
},  
computed: {   
 filteredInvalidRules() {     
 return this.validationResult.sss.rules.filter((rule) => rule.isValid === false);  
  },  
},

修复方案 #

• 添加嵌套属性的存在性校验：直接访问this.validationResult.sss.rules时，若某一层属性不存在（比如初始渲染时validationResult未完成异步加载），会触发JS错误，导致计算属性返回undefined。使用可选链操作符和空值合并运算符做安全访问：

  filteredInvalidRules() {
    return this.validationResult?.sss?.rules?.filter(rule => rule.isValid === false) || [];
  }
  

• 确认数据结构匹配：核对开发者工具中validationResult的实际结构，确保sss字段存在且rules是数组类型。如果rules不是数组，调用filter方法会报错，进而让计算属性返回undefined。
• 添加调试验证：在计算属性中打印当前validationResult的值，确认执行过滤时数据是否已正确加载：

  filteredInvalidRules() {
    console.log('当前validationResult数据:', this.validationResult);
    return this.validationResult?.sss?.rules?.filter(rule => rule.isValid === false) || [];
  }
  

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