Quasar中如何更新ref数组内指定id元素的qty属性值

直接修改find匹配到的目标对象的qty属性即可完成更新，Vue3 会自动追踪响应式对象的属性变更，同步触发关联视图更新，无需额外做数组替换操作。

推荐写法（简洁高效） #

不需要单独声明old_qty、new_qty中间变量，加一层空值判断避免id不存在时的运行时报错：

// 查找id匹配的目标商品
const targetProduct = myproducts.value.find(item => item.id === id)
if (targetProduct) {
  // 直接递增qty即可
  targetProduct.qty += 1
}

适配你现有逻辑的写法 #

如果你已经提前计算好了new_qty，直接给目标属性赋值即可：

// 查找目标元素，加可选链兜底避免报错
const targetProduct = myproducts.value.find(x => x.id === id)
// 沿用你已有的计算逻辑，加空值兜底
const old_qty = targetProduct?.qty ?? 0
const new_qty = old_qty + 1
// 赋值完成更新
if (targetProduct) {
  targetProduct.qty = new_qty
}

注意点 #

• 禁止直接写myproducts.value.find(x => x.id === id).qty = new_qty：如果传入的id不在数组中，find会返回undefined，此时读取/赋值属性会抛出Cannot read properties of undefined的运行时错误，必须加判空逻辑。
• 不需要使用splice替换整个元素、或者全量覆盖myproducts.value的方式更新：Vue3 的响应式系统可以精确追踪嵌套对象的属性变更，直接修改属性的方案性能更好。

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