在 AlpineJS 中，可直接使用 x-model="data[index].name" 实现对数组内对象属性的动态双向绑定，无需 x-bind:x-model；错误地将字符串字面量传给 x-model 会导致绑定失效，必须传递响应式路径表达式。
在 alpinejs 中，可直接使用 `x-model="data[index].name"` 实现对数组内对象属性的动态双向绑定，无需 `x-bind:x-model`；错误地将字符串字面量传给 `x-model` 会导致绑定失效，必须传递响应式路径表达式。
在 AlpineJS 中，x-model 是一个指令而非属性，它不接受字符串字面量（如 'data[0].name'），而必须接收一个可求值的 JavaScript 路径表达式（如 data[index].name）。当你写成 x-bind:x-model="data[${index}].name" 时，实际是把字符串赋给了 x-model 属性——但 AlpineJS 解析器无法将该字符串自动转换为响应式引用，因此绑定失败，输入框始终为空。
✅ 正确写法如下（关键：去掉 x-bind:，直接使用表达式）：
<div x-data="alpineObject()">
<template x-for="(item, index) in data" :key="index">
<div>
<input
type="text"
:id="`name_${index}`"
:name="`name_${index}`"
x-model="data[index].name"
>
</div>
</template>
</div>
<script>
function alpineObject() {
return {
data: [
{ name: 'first' },
{ name: 'second' },
{ name: 'third' }
]
}
}
</script>? 补充说明：
- x-for 中的 :key="index"（即 x-bind:key）虽非必需，但推荐添加以提升列表更新的稳定性；
- x-model 会自动建立响应式连接：修改输入框内容 → 更新 data[index].name；反之，若 JS 中修改 data[0].name，对应输入框也会实时同步；
- AlpineJS 支持深层嵌套路径（如 data[index].profile.settings.theme），只要路径最终指向可读写属性即可。
⚠️ 注意事项：
- 不要使用引号包裹路径：x-model="data[index].name" ✅，x-model="'data[index].name'" ❌；
- 确保 data 是响应式数组（Alpine 默认处理 x-data 返回对象的所有属性，包括数组及其内部对象）；
- 若需动态增删数组项，建议配合 push() / splice() 等原生数组方法（Alpine 已代理，触发视图更新）。
总结：x-model 的本质是“响应式赋值绑定”，它依赖 Alpine 的运行时解析器执行真正的 JS 属性访问与监听。只需写出合法、可执行的路径表达式，并确保上下文变量存在且可写，即可实现数组对象属性的无缝双向绑定。
