Vue计算属性在Prop初始化前调用导致过滤失效求助

问题场景 #

通过mapGetters获取Vuex状态数组all，在计算属性getData中根据传入的Prop type过滤数组，但即使ele.type与this.type.toLowerCase()值看似一致（如expired），过滤结果始终为空，怀疑计算属性在Prop初始化前执行。

相关代码 #

Getter与Prop定义 #

all: 'mdm/all', // 'mdm'为模块名，'all'对应state
props: ['type'] // 注：原代码存在拼写错误，正确应为props而非prop

计算属性代码 #

getData() {
  const filteredData = this.all.filter(ele => ele.type === this.type.toLowerCase());
  return filteredData.map(item => ({
    name: item.name,
    orderNo: item.order_no
  }));
}

排查与解决步骤 #

• 修正Prop拼写错误
  原代码里prop: [type]属于语法错误，正确写法是props: ['type']，拼写错误会导致this.type无法正确绑定，直接引发过滤失败。

• 添加空值防御判断
  若计算属性确实在type未初始化时执行，可先判断type是否存在，避免无值时的无效过滤：

  getData() {
    if (!this.type) return [];
    const filteredData = this.all.filter(ele => ele.type === this.type.toLowerCase());
    return filteredData.map(item => ({
      name: item.name,
      orderNo: item.order_no
    }));
  }
  

• 调试比对实际值
  在计算属性中添加日志，打印this.type、转小写后的值以及数组元素的type，确认是否存在空格、不可见字符等肉眼难以识别的差异：

  getData() {
    console.log('当前type值:', this.type, '转小写后:', this.type?.toLowerCase());
    console.log('all数组元素type:', this.all.map(ele => ele.type));
    const filteredData = this.all.filter(ele => ele.type === this.type.toLowerCase());
    console.log('过滤结果:', filteredData);
    return filteredData.map(item => ({
      name: item.name,
      orderNo: item.order_no
    }));
  }
  

• 确认响应式依赖与数据完整性

  1. 检查Vuex的mdm/all getter是否返回完整数组，可在组件mounted钩子中打印this.all，确认初始化时已有数据；
  2. 确保all数组是响应式的：Vuex状态需通过mutations方法修改，而非直接赋值，否则计算属性无法感知数据变化；
  3. 验证父组件传入的type值是否正确，避免传入undefined、空字符串等无效值。

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