vue 使用v-for加载页面数据时报 "TypeError: Cannot read properties of null (reading 'forEach')"

当你在Vue应用中使用`v-for`指令遍历数据时，遇到这个错误通常是由于尝试访问的数据源在循环之前是`null`或者`undefined`。这可能是由于以下几个原因：

1. 数据初始化延迟：确保你在使用`v-for`前，你的数据已经从API、本地存储或者其他地方获取并且赋值给相应的变量了。

2. 数据绑定问题：检查你的`data`对象是否正确地映射到了组件内的模板上，确保你的数组或者对象属性名匹配。

3. 父子组件通信：如果数据来自父组件，确保通过props传递过来的数据已正确接收到，并非初始状态为null。

4. 组件生命周期钩子：确认`mounted`或`updated`这类生命周期钩子里数据是否已经准备就绪。

修复此错误的一般步骤：
1. 检查数据赋值：在`v-for`之前，确保`data`中的数组或对象不是`null`或`undefined`。
2. 判断条件：可以在`v-for`外面添加一个判断条件，只有当数据存在时才开始渲染。
3. 错误处理：使用`.some()`或`.filter()`等方法在遍历时避免直接访问不存在的元素。

<template>
  <div v-if="items && items.length > 0">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: null,
    };
  },
  mounted() {
    // 在这里获取并设置items
    this.items = ...; // 调用 API 或者其他获取数据的地方
  },
};
</script>