使用Laravel+Vue.js实现输入条码后自动填充配件供应商及描述字段

修复方案 #

第一步：修改前端模板的条码输入事件 #

你需要在触发getAccessory方法时传入当前编辑行的索引，才能准确定位要回填的目标行，修改条码输入框代码：

<input type="text" class="form-control" name="barcode" v-model="line.barcode" @change="getAccessory(line.barcode, k)" required>

第二步：修改Vue的getAccessory方法 #

拿到接口返回的配件数据后，直接赋值给对应索引的行字段即可：

getAccessory(barcode, lineIndex) {
    axios.get("/getdetails/?barcode=" + barcode).then(res => {
        // 取返回的第一条匹配数据，你现有控制器返回的是数组
        const accessory = res.data[0] ?? null;
        if(accessory) {
            // 如果是Vue2环境，为了保证响应式生效，建议用$set赋值
            this.$set(this.form.lines[lineIndex], 'vendor_id', accessory.vendor_id);
            this.$set(this.form.lines[lineIndex], 'description', accessory.description);
        }
    });
}

第三步：优化Laravel控制器逻辑（可选推荐） #

因为条码是唯一标识，不需要返回集合，直接返回单条数据更合理：

public function getaccessory() 
{
    $barcode = request('barcode');
    $accessory = DB::table('accessories')
        ->where('barcode', $barcode)
        ->select('vendor_id', 'description')
        ->first();
    return response()->json($accessory); 
}

如果修改了控制器，Vue里的取值逻辑可以改成const accessory = res.data ?? null;，不需要再取下标0。

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