如何跟踪Vue组件到Rails应用的数据流：文本输入未传到后端问题

问题根因 #

前端侧 #

• 文本输入框绑定的message变量仅存储在组件本地data中，没有任何同步到后端的逻辑：其他字段如附件审核状态、文档类型均通过计算属性的set方法调用updateAttachment接口同步变更，但message没有相关触发逻辑。
• 提交按钮事件绑定错误：模板中使用:click="submit"属于属性绑定，Vue的点击事件监听需用@click="submit"，当前点击按钮根本不会触发提交逻辑。
• 现有submit方法仅打印附件对象，没有将message值传入接口的逻辑。

后端侧 #

• CcVAttachment模型中没有对应存储文本内容的字段，即使前端传值也没有地方持久化。
• 控制器调用的ccenter.cc_v_attachments.update操作类未将文本字段加入参数白名单，会自动过滤前端传入的额外参数。

修复步骤 #

1. 修复前端逻辑 #

首先修改模板中的按钮事件绑定：

<!-- 把原来的:click改成@click -->
<button class="input" @click="submit">提交</button>

修改submit方法，提交时将文本内容传给后端：

submit() {
  // 非空校验可根据业务调整
  if (this.message.trim()) {
    this.updateAttachment([this.attachment.id, { 
      // 字段名可和后端协商调整
      remark: this.message 
    }]).then(() => {
      // 提交成功后清空输入框，可补充其他成功逻辑
      this.message = ''
    })
  }
}

2. 后端新增存储字段 #

生成数据库迁移，给cc_v_attachments表新增存储文本的字段：

rails g migration AddRemarkToCcVAttachments remark:text
rails db:migrate

如果业务逻辑要求文本存到关联的CcMessage表，可跳过这步，在后续操作类中直接更新关联的message对象即可。

3. 放开后端参数白名单 #

找到ccenter.cc_v_attachments.update对应的操作类，把新增的文本字段加入参数允许列表，若用Rails默认强参数，在对应位置补充permit(:remark)即可。

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