Alpine.js V3嵌套x-for循环输入无法绑定数据问题求助

问题出在你的内层循环中，x-model="number"绑定的是循环迭代出来的值副本，而非原数组元素的引用，所以修改输入框内容不会同步到book_data中。要解决这个问题，需要通过对象键+数组索引直接绑定到原数据的具体位置。

修改后的完整代码：

<script>
  book_data = { 
    books: {
      a1: ['one', 'two', 'three' ],
      a2: ['four', 'five', 'six' ],
      a3: ['seven', 'eight', 'nine' ]
    }
  };
</script>

<div x-data="book_data">
  <!-- 外层循环：获取对象的键（key）和对应数组值（book） -->
  <template x-for="(book, key) in books" :key="key">
    <div>
      <!-- 内层循环：获取数组元素的索引（index）和值 -->
      <template x-for="(number, index) in book" :key="index">
        <!-- 直接绑定到原数据的books[key][index] -->
        <input x-model="books[key][index]" type="text" />
      </template>
    </div>
  </template>
  <!-- 打印组件内的响应式books数据 -->
  <button @click="console.log(this.books);">Submit</button>
</div>

关键修改点：

• 外层x-for添加了key参数，用于获取对象的键名（a1/a2/a3）
• 内层x-for添加了index参数，用于定位数组中的元素位置
• x-model直接绑定到books[key][index]，确保修改输入框时直接更新原数据对象
• 按钮点击事件中使用this.books访问组件内的响应式数据（直接用book_data也能生效，但this更符合Alpine的上下文规范）

修改后，输入框的内容会实时同步到book_data.books中，点击按钮就能在控制台看到更新后的数据。

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