Vuetify 2 Data Table根据条形码获取对应行数据求助

问题根源 #

你的代码里有三个关键错误导致无法找到对应行：

1. find回调变量引用错误：find方法的回调里写了items.Customer_barcode，应该用回调参数item来访问当前遍历的元素，而非外部的items数组。
2. 变量使用不一致：你定义了局部变量scannedbarcode，但后续判断用的是this.scannedbarcode（若未在data中定义该属性，会导致判断逻辑失效）。
3. 未处理扫码枪的多余字符：扫码枪输入通常会自动追加回车符，可能导致条形码末尾带有换行/空格，破坏匹配逻辑。

修复后的代码 #

handleBarcodeInput(event) {
  // 去除输入中的空格、换行符，适配扫码枪的自动回车行为
  let scannedbarcode = event.target.value.trim();
  console.log("Detected Barcode:", scannedbarcode);

  // 用局部变量scannedbarcode做长度判断
  if (scannedbarcode.length <= 8) {
    this.barcode = "";
    return;
  }

  if (scannedbarcode.length >= 9) {
    // 修正find回调的变量引用，遍历每个item匹配条形码
    const item = this.items.find(item => item.Customer_barcode === scannedbarcode);
    console.log(item);

    // 找到行数据后，修改已打包数量的示例逻辑
    if (item) {
      // 按需修改Qty_To_Ship（已打包数量），比如累加1
      item.Qty_To_Ship += 1;
      // Vue 2中若数据未自动更新，可触发响应式更新：
      // Vue.set(item, 'Qty_To_Ship', item.Qty_To_Ship);
    }
  }
}

额外检查项 #

• 确认this.items数组的每个对象都包含Customer_barcode字段，且字段值与扫描的条形码完全一致（区分大小写、无额外字符）。
• 如果修改行数据后Data Table未刷新，可通过this.items = [...this.items]重新赋值数组，或者用Vue.set更新单个属性来触发响应式更新。

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