如何解决Vue项目报错TypeError: Cannot read properties of undefined (reading 'product_stocks')

核心报错根因 #

你的错误是selectedProduct方法中，尝试访问undefined的product_stocks属性导致的，本质是你拿到的匹配产品对象不存在，以下是具体问题和修复步骤：

优先级最高的问题：@change事件参数错误 #

原生<select>的@change事件默认传递的第一个参数是事件对象，不是你绑定的v-model值，你现在的代码里拿到的id其实是事件对象，拿事件对象和产品id对比肯定匹配不到，filter返回空数组，product[0]自然就是undefined。

修复方式二选一： #

1. 在模板中手动传递选中的id：

<!-- 把@change改成手动传form.product_id的值 -->
<select  @change="selectedProduct(form.product_id)" class="form-control" v-model="form.product_id">

2. 在方法中从事件对象取值：

selectedProduct(e){
  const id = e.target.value // 从事件对象中获取选中的value
  // 后续逻辑不变
}

第二步：优化方法逻辑，增加非空判断，避免后续报错 #

修复参数问题后，建议优化方法的容错逻辑，避免数据不符合预期时再次报错，同时记得每次切换产品时清空之前的库存列表，避免多个产品的数据叠加：

methods: {
  selectedProduct(id){
    // 先清空之前的产品库存项
    this.form.items = []
    // 用find替代filter，直接返回匹配的第一个产品对象，更高效
    const product = this.products.find(product => product.id == id)
    // 判断产品是否存在
    if(!product) {
      console.warn('未找到对应id的产品，id为：', id)
      return
    }
    // 判断产品的库存字段是否存在且为数组
    if(!product.product_stocks || !Array.isArray(product.product_stocks)) {
      console.warn('当前产品无库存数据，产品信息：', product)
      return
    }
    // 用forEach遍历替代map（map是用来生成新数组的，单纯遍历用forEach更合适）
    product.product_stocks.forEach(stock => {
      // 加判断避免size不存在时报错
      if(!stock?.size) return
      const item = {
        size : stock.size.size,
        size_id : stock.size_id,
        quantity : ''
      }
      this.form.items.push(item)
    })
  }
}

其他可能的问题 #

如果以上修复后还是报错，需要确认Vuex返回的products数据结构是否符合预期：

• 确认GET_PRODUCTS接口返回的每个产品对象都存在product_stocks字段，且字段名拼写正确（注意大小写、下划线是否和后端返回一致）
• 可以在方法开头打印console.log('所有产品：',this.products, '当前选中id：',id)，打开控制台确认选中的id能在产品列表中找到对应项

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