Alpine.js中x-for更新失效并出现读取rows未定义错误

问题根源 #

• 响应式失效：Alpine.js通过ES6 Proxy实现响应式，直接通过数组索引赋值（this.rows[index] = ...）属于“静默修改”，Proxy无法捕获该操作，因此页面不会同步更新。
• 初始化报错：Cannot read properties of undefined (reading 'rows')是初始化阶段的竞态问题——模板渲染时Store可能还未完成初始化，导致临时的$store.test未定义。

修复方案 #

1. 修正数组更新逻辑，触发响应式 #

使用数组原生的splice方法修改元素（Proxy能捕获数组方法调用），或者通过扩展运算符重新生成数组：

Alpine.store('test',{
 rows: [
  {'title':'testA','key':'a'},
  {'title':'testB','key':'b'},
  {'title':'testC','key':'c'}
 ],
 change(index,title,key){
    // 推荐：用splice替换指定索引元素
    this.rows.splice(index, 1, {title, key});

    // 备选：扩展运算符重新赋值数组
    // this.rows = [
    //   ...this.rows.slice(0, index),
    //   {title, key},
    //   ...this.rows.slice(index + 1)
    // ];
 }
});

Alpine.start();

2. 消除初始化竞态报错 #

给根元素x-data添加安全访问逻辑，确保Store就绪后再渲染列表：

<div x-data="{ get rows() { return $store.test?.rows || [] } }">
  <table border="1">
    <template x-for="(row, index) in rows" :key="row.key">
      <tr><td x-text="row.title"></td></tr>
    </template>
  </table>
</div>
<button @click="$store.test.change(1, 'testD', 'd')">replace</button>

通过可选链?.和默认空数组，避免Store未初始化时的属性访问错误。

效果验证 #

修改后点击按钮，表格第二行会成功更新为testD，且控制台不再出现初始化报错。

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