Bootstrap Vue表格内联编辑点击完成后数据为空无法更新问题

核心原因 #

你提交数据为空的最直接原因是前端更新接口没有传递表单数据，后端拿到空请求体自然会把对应字段置为空。

具体修复步骤 #

• 1. 修复updateTest方法的传参逻辑
     你当前post请求的第二个参数是空对象，没有把用户输入的form表单数据传给后端，修改后的代码如下：

  updateTest(id) {
    // 提交前可加console.log(this.form)确认数据是否正常
    this.$http.post('http://127.0.0.1:8000/api/updateTest/' + id, this.form)
      .then((res)=>{
        this.editting = null
        // 原代码self未定义，替换为this
        this.message = 'Data is entered'
      })    
  },
  

• 2. 补全editMode方法的赋值逻辑
     你点击编辑按钮时需要把当前行的原始数据赋值给表单，否则输入框初始为空，用户未修改直接提交也会出现空值，添加如下逻辑：

  // 添加到你的methods配置中
  editMode(id, item) {
    this.editting = id
    // 将当前行数据赋值给表单，作为初始值
    this.form = {
      id: id,
      name: item.name,
      price: item.price
    }
  }
  

• 3. 后端可选优化（避免异常写入）
     首先确认你的Test模型中已经把name、price字段添加到$fillable属性中，否则Laravel会拒绝批量更新这两个字段：

  // Test.php模型中添加
  protected $fillable = ['name', 'price'];
  

  其次可以给接口加参数校验，避免空值写入数据库：

  public function updateTest($id, Request $request)
  {
      // 校验参数必填
      $validated = $request->validate([
          'name' => 'required|string',
          'price' => 'required|numeric',
      ]);
      $updateTest = Test::findOrFail($id);
      $updateTest->update($validated);
      return response()->json('successfully updated');
  }
  

验证方式 #

修改完成后打开浏览器控制台的网络面板，点击完成按钮时查看接口请求的Payload是否携带了正确的name和price参数，确认传值正常即可解决空值问题。

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