如何在 Alpine.js 中基于数组实现双向绑定的输入列表

本文详解如何使用 Alpine.js 的 x-for 和 x-model 正确实现动态输入框列表的双向数据绑定，解决直接绑定循环变量导致更新失效的问题。

本文详解如何使用 alpine.js 的 `x-for` 和 `x-model` 正确实现动态输入框列表的双向数据绑定，解决直接绑定循环变量导致更新失效的问题。

在 Alpine.js 中，使用 x-for 渲染列表时，切勿将 x-model 绑定到循环变量（如 item）本身——因为 item 是每次迭代中创建的临时局部引用，对其赋值不会影响原始数组。正确做法是通过索引（i）反向绑定到数组元素 items[i]，从而建立真正的双向响应式连接。

以下为修复后的完整示例：

<div x-data="{ items: ['apples', 'pears'] }">  <h3>List of items:</h3>  <template x-for="(item, i) in items" :key="i">    <div>      <input class="text" x-model="items[i]" />    </div>  </template>  <br />  <button @click="items.push('')">+</button>  <br />  <span x-text="items"></span></div>

✅ 关键要点说明：

• 使用 (item, i) in items 解构语法获取当前项和索引；
• x-model="items[i]" 直接绑定到数组下标，确保输入变更实时同步至 items 数组；
• 推荐为 <template> 添加 :key="i"（Alpine v3.10+ 支持），提升列表更新的稳定性与性能；
• 新增空项时调用 items.push('')，后续用户可在对应输入框中编辑内容，修改将立即反映在 items 数组及下方 x-text 显示中。

⚠️ 注意事项：

• 避免使用 x-model="item" —— 这仅修改局部副本，原始数组不受影响；
• 若需支持删除功能，可扩展按钮逻辑：<button @click="items.splice(i, 1)">✕</button>（注意作用域内 i 可用）；
• 对于复杂对象数组（如 [{name: 'apple'}, {name: 'pear'}]），应绑定 items[i].name，原理一致。

通过索引驱动的模型绑定，你就能构建出真正响应式的、可编辑的动态表单列表——这是 Alpine.js 实现轻量级交互式 UI 的核心实践之一。