Vue计算属性获取数组最后一个对象属性报undefined错误如何解决

云上老周

2026-8-30

报错原因

初始加载时products是长度为0的空数组，此时计算属性中this.products.length - 1计算结果为-1，this.products[-1]的取值为undefined，直接访问undefined上的productKey属性就会触发该报错。只要出现数组长度为0的场景（比如初始加载、手动清空产品列表后），这段代码都会报错。

修复方案

给计算属性增加空值兜底逻辑，数组为空时返回默认值，避免访问不存在的元素属性。两种常用写法如下：

// 写法1：基础判断写法，兼容性更好
lastKey() {
  if (this.products.length === 0) return ''
  return this.products[this.products.length - 1].productKey
}

// 写法2：用ES新特性简化代码
lastKey() {
  // at(-1)直接取数组最后一位，可选链?.避免访问undefined属性，??设置空值默认值
  return this.products.at(-1)?.productKey ?? ''
}

如果你的需求是每次新增产品后，立刻把最新的productKey存入Vuex，不需要依赖计算属性取值，直接在addNewProduct方法内push完成后操作即可，还能避免计算属性更新的时序问题：

addNewProduct() {
  const newProduct = {
    productKey: '',
    productName: ''
  }
  this.products.push(newProduct)
  // 直接操作刚创建的新产品对象即可
  this.$store.commit('updateLastKey', newProduct.productKey)
}