AlpineJS能否绑定数组对象至x-model？动态绑定方法问询

用户尝试在AlpineJS的x-for循环中，通过x-bind:x-model动态绑定数组内对象的name属性，但仅显示空文本框，绑定未生效，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data="alpineObject()">
        <template x-for="(item, index) in data">
            <div>
                <input type="text" x-bind:id="`name_${index}`" x-bind:name="`name_${index}`" x-bind:x-model="`data[${index}].name`">
            </div>
        </template>
    </div>
    <script>
        function alpineObject() {
            return {
                data: [
                    {
                        name: 'first'
                    },
                    {
                        name: 'second'
                    },
                    {
                        name: 'third'
                    }
                ],
            }
        }
    </script>
</body>
</html>

问题核心是错误使用x-bind:x-model：x-model本身就是AlpineJS的双向绑定指令，不需要用x-bind包裹；同时模板字符串拼接绑定路径的写法不符合AlpineJS语法规则。

以下是两种有效实现方式：

方式1：直接用循环变量item访问属性 #

x-for循环中的item就是当前遍历到的数组元素，直接通过x-model="item.name"完成绑定：

<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="item.name">
        </div>
    </template>
</div>

方式2：通过数组索引访问元素属性 #

如果需要依赖索引值，直接在x-model中使用data[index].name即可，无需模板字符串拼接：

<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>

提示：给x-for的<template>加上:key="index"，可以提升渲染性能，避免数组变化时出现渲染异常。

两种写法都能实现双向绑定：文本框会正确显示数组中对象的name属性值，修改输入框内容也会同步更新数组内的对应属性。

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