如何使用AlpineJS实现输入框列表的双向数据绑定？

问题出在x-for循环的取值方式上：当你用item in items遍历数组时，item是数组元素的值类型副本（字符串属于基本类型），修改这个副本不会同步回原数组。要实现双向绑定，必须通过数组索引直接操作原数组的对应元素。

修复后的代码如下：

<div x-data="{items: ['apples','pears']}">
    <h3>List of items:</h3>

    <template x-for="(item, index) in items" :key="index">
        <div>
            <input class="text" x-model="items[index]"></input>
        </div>
    </template>
    <br>
    <button @click="items.push('')">+</button>
    <br>
    <span x-text="items"></span>
</div>

关键改动点：

• 把x-for的遍历语法改成(item, index) in items，同时加上:key="index"（Alpine.js要求循环项必须有唯一key，避免渲染异常）
• x-model直接绑定items[index]，这样输入框的修改会直接作用于原数组的对应位置，实现双向同步。

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