AlpineJS受控表单提交原始值而非x-model同步值问题

你的问题核心是表单提交时未携带textarea的最新编辑内容，根源在于两个关键问题：

1. <textarea>缺少name属性，表单提交时浏览器不会将该控件的数据发送到后端；
2. 手动触发表单提交的场景下，需确保DOM元素值与Alpine变量完全同步，避免潜在的更新时序差异。

修复步骤 #

1. 给textarea添加name属性

表单控件必须通过name属性标识，后端才能正确接收对应字段的数据。修改后的textarea代码：

<textarea 
    type="text"
    x-ref="textInput"
    class="w-full p-2 border"
    x-model="newText"
    name="content" <!-- 新增name属性，后端通过该名称接收值 -->
    @keydown.enter="save"
    @keydown.escape="cancel"
></textarea>

2. 调整save方法，确保DOM值同步后提交

在调用表单submit()前，手动将Alpine的newText同步到textarea的DOM值，消除可能的异步更新延迟：

save: function() {
    this.origText = this.newText;
    this.isEditing = false;
    // 手动同步DOM值，确保提交的是最新编辑内容
    this.$refs.textInput.value = this.newText;
    console.log(this.origText);
    console.log(this.newText);
    console.log(event.target);
    event.target.submit();
},

关键说明 #

• 无name属性的表单控件不会被包含在提交数据中，这是后端收到原始值的核心原因；
• 尽管x-model默认实现双向绑定，但手动触发提交时，补充DOM值同步可以彻底规避任何潜在的时序问题，确保提交内容准确。

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