Vue2组件路由传参后magnitud调用toString()报错问题

报错Cannot read properties of undefined (reading 'toString')的核心原因是：表格渲染时，当前遍历的item对象中magnitud属性为undefined，导致调用toString()时触发错误。可能的触发场景包括：

• 路由传参阶段，datos对象中的magnitud未正确赋值，或传参过程中数据丢失
• 目标组件接收参数后，填充listaDatos数组的时机晚于表格初始渲染，导致初始渲染时item或magnitud未初始化
• 手动调用toString()多此一举，且未做空值校验

1. 校验路由传参的完整性 #

在源组件执行$router.push前，先确认待传递的datos数据是否完整：

// 源组件：push路由前打印校验
console.log('待传递数据：', datos);
this.$router.push({
  name: '目标组件路由名',
  // 推荐用query传参（刷新不丢失），若用params需确保路由配置了对应动态参数
  query: { datos: JSON.stringify(datos) }
});

在目标组件的created钩子中，确认接收的参数是否有效：

// 目标组件：接收并校验参数
created() {
  try {
    const receivedDatos = JSON.parse(this.$route.query.datos);
    console.log('接收的数据：', receivedDatos);
    // 确认magnitud存在后再赋值给listaDatos
    if (receivedDatos?.magnitud !== undefined) {
      this.listaDatos = [receivedDatos]; // 单条数据示例，多条直接赋值数组即可
    } else {
      console.warn('datos中缺失magnitud属性');
    }
  } catch (err) {
    console.error('参数解析失败：', err);
  }
}

2. 优化表格渲染的空值处理 #

方式一：利用Vue过滤器原生特性（推荐） #

Vue2过滤器可以直接接收数值，无需手动转字符串，且可在过滤器内部统一处理空值：

<!-- 模板中用管道符调用过滤器 -->
<v-data-table :items="listaDatos">
  <template v-slot:item.magnitud="{ item }">
    {{ item.magnitud | formatMilesConDecimales }}
  </template>
</v-data-table>

修改过滤器，增加空值判断逻辑：

// 目标组件的filters定义
filters: {
  formatMilesConDecimales(value) {
    // 空值直接返回空字符串或默认值
    if (value === undefined || value === null) return '';
    // 执行你的格式化逻辑
    const numStr = value.toString();
    // 此处补充千分位+小数的格式化代码
    return formattedResult;
  }
}

方式二：模板中直接做空值校验 #

如果一定要手动调用toString()，先确保item.magnitud存在：

<v-data-table :items="listaDatos">
  <template v-slot:item.magnitud="{ item }">
    {{ item.magnitud ? $options.filters.formatMilesConDecimales(item.magnitud.toString()) : '' }}
  </template>
</v-data-table>

3. 初始化listaDatos为合理值 #

在目标组件的data中给listaDatos设置初始空数组，避免渲染时遍历undefined：

data() {
  return {
    listaDatos: []
  }
}

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