Alpine.js 的 x-model 指令支持直接绑定到数组中对象的嵌套属性（如 data[index].name），无需使用 x-bind:x-model；错误写法会破坏响应式绑定，导致输入框为空。
alpine.js 的 `x-model` 指令支持直接绑定到数组中对象的嵌套属性（如 `data[index].name`），无需使用 `x-bind:x-model`；错误写法会破坏响应式绑定，导致输入框为空。
在 Alpine.js 中，x-model 是一个指令（directive），而非动态属性——它必须接收一个可响应式的 JavaScript 表达式引用，而非字符串字面量。因此，当你写成 x-bind:x-model="data[${index}].name" 时，实际是将字符串 'data[0].name' 绑定给 x-model 属性，而 Alpine.js 无法解析该字符串为有效路径，最终导致绑定失效、输入框始终为空。
✅ 正确写法是直接使用 JavaScript 表达式（不加引号包裹，也不用 x-bind）：
<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>? 注意：推荐使用 :id 和 :name（即 x-bind:id 的简写）替代 x-bind:id，更简洁；同时为 x-for 添加 :key="index"（Alpine v3.10+ 推荐）以提升列表更新稳定性。
完整可运行示例：
<div x-data="alpineObject()">
<template x-for="(item, index) in data" :key="index">
<div class="mb-2">
<label :for="`name_${index}`">第 {{ index + 1 }} 项名称：</label>
<input
type="text"
:id="`name_${index}`"
:name="`name_${index}`"
x-model="data[index].name"
class="border px-2 py-1 rounded"
>
</div>
</template>
<!-- 实时查看绑定结果 -->
<pre x-text="JSON.stringify(data, null, 2)"></pre>
</div>
<script>
function alpineObject() {
return {
data: [
{ name: 'first' },
{ name: 'second' },
{ name: 'third' }
]
}
}
</script>? 关键要点总结：
- x-model 必须是表达式（如 data[index].name），不是字符串（如 "data[index].name"）；
- 不要混用 x-bind:x-model —— x-model 本身已是指令，x-bind 仅用于绑定 HTML 属性（如 id, class, style）；
- 数组索引访问（data[index].name）在 Alpine 中完全支持，且具备响应式更新能力；
- 若需深层嵌套或动态 key，可结合计算属性或 $nextTick() 处理复杂场景，但基础数组对象绑定无需额外封装。
这样即可实现对数组中每个对象字段的独立、实时、双向绑定。
