AlpineJS表单提交时隐藏输入框值为空问题求助

问题原因 #

你给隐藏输入框设置了value="my subject"，但同时用x-model="data.subject"绑定了AlpineJS的响应式数据。AlpineJS初始化时，x-model会优先将data.subject的初始空字符串同步到输入框，直接覆盖了value属性的内容；而且隐藏输入框不会触发用户输入类的事件，无法同步value到响应式数据里，所以提交时data.subject始终为空。

解决方案 #

这里提供三种可行的处理方式，按需选择：

1. 直接初始化响应式数据的subject值

修改JavaScript代码，把data.subject的初始值设为"my subject"，这样x-model绑定后，数据和输入框会自动同步正确值：

function inquiry() {
  return {
    data: {
      email: "",
      subject: "my subject" // 初始化静态值
    },
    submit() {
      console.log(JSON.stringify(this.data));
    }
  };
}

对应的隐藏输入框可以去掉value属性，只保留x-model绑定：

<input type="hidden" name="subject" x-model="data.subject">

2. 静态值无需响应式绑定，提交时手动补充

如果subject是固定不变的静态值，完全不需要用x-model绑定，直接在提交方法里手动把值加入数据即可：

function inquiry() {
  return {
    data: {
      email: ""
    },
    submit() {
      const submitData = { ...this.data, subject: "my subject" };
      console.log(JSON.stringify(submitData));
    }
  };
}

隐藏输入框保留value属性，去掉x-model：

<input type="hidden" name="subject" value="my subject">

这样表单提交时，隐藏输入框的value会被正常提交，控制台输出也会包含subject的值。

3. 用x-init同步输入框value到响应式数据

如果一定要保留输入框的value属性，同时让响应式数据获取到这个值，可以通过x-init在组件初始化时把输入框的value赋值给data.subject：

<input type="hidden" name="subject" value="my subject" x-model="data.subject" x-init="data.subject = $el.value">

这种方式会在组件加载完成后，立即把输入框的静态value同步到响应式数据中，后续也能通过通过x-model保持同步。

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