Alpine.js动态添加表单字段问题：仅提交最新地址的修复求助

问题根源 #

原生JS实现中应该是给每个新增地址的表单元素设置了带索引的唯一name属性（比如addresses[0].street、addresses[1].street），而你的Alpine.js代码大概率让所有地址项的表单元素name重复，浏览器提交表单时会覆盖重复name的值，最终只保留最后一组数据。

修复方案 #

在Alpine.js中维护一个地址对象数组，渲染时给每个表单元素绑定带数组索引的唯一name，确保新增地址时添加新的空对象到数组中。

修复后的完整代码示例 #

<div x-data="addressManager()">
  <form @submit="handleSubmit">
    <!-- 地址列表渲染 -->
    <template x-for="(address, index) in addresses" :key="index">
      <div class="address-item">
        <input 
          type="text" 
          x-model="address.street" 
          :name="`addresses[${index}].street`" 
          placeholder="街道"
        >
        <input 
          type="text" 
          x-model="address.postcode" 
          :name="`addresses[${index}].postcode`" 
          placeholder="邮编"
        >
        <button type="button" @click="removeAddress(index)">删除地址</button>
      </div>
    </template>

    <button type="button" @click="addAddress">添加新地址</button>
    <button type="submit">提交表单</button>
  </form>
</div>

<script>
function addressManager() {
  return {
    addresses: [
      // 初始化一个空地址项
      { street: '', postcode: '' }
    ],
    addAddress() {
      this.addresses.push({ street: '', postcode: '' });
    },
    removeAddress(index) {
      this.addresses.splice(index, 1);
    },
    handleSubmit(e) {
      e.preventDefault();
      // 查看完整提交数据
      console.log('提交的地址数据:', this.addresses);
      // 如需原生表单提交，可移除preventDefault，后端能直接解析addresses数组
      const formData = new FormData(e.target);
      console.log('FormData解析结果:', Object.fromEntries(formData));
    }
  }
}
</script>

关键修复点 #

• 用x-for="(address, index) in addresses"遍历地址数组，通过index区分每个地址项
• 表单元素的name动态绑定为addresses[${index}].字段名，保证每个字段的name唯一，后端可直接解析为数组格式
• 用x-model绑定到数组中对应地址对象的属性，实现数据双向同步
• 新增地址时往addresses数组push新的空对象，删除时用splice移除对应索引的项

修改后，表单提交时所有地址的字段都会被正确收集，不会出现仅保留最后一组的问题。

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