Alpine.js：嵌套在可复用组件中的x-for元素无法更新

问题现象 #

使用x-for遍历数组时，普通嵌套元素能在数组内容变化后正常更新，但如果元素嵌套在通过Alpine.data定义的可复用组件内，就无法同步更新。

简化场景：点击按钮将数组从[{x:'x'},{x:'y'}]替换为[{x:'a'},{x:'b'}]，普通div的遍历结果能更新，嵌套组件内的遍历结果无变化。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.js"></script>
</head>
<body x-data="{my_array: [{x:'x'},{x:'y'}],click() {this.my_array = [{x:'a'},{x:'b'}];}}">
  <!-- Loop with plain div -->
  <template x-for="item in my_array">
    <div x-text="item.x"></div>
  </template>
  
  <!-- Loop with div nested inside component -->
  <template x-for="item in my_array">
    <div x-data="some_component" >
      <div x-text="item.x"></div>
    </div>
  </template>
  
  <button @click="click">Click me</button>
  
  <script>
    document.addEventListener('alpine:init', () => {
      Alpine.data('some_component', () => ({}));
    });
  </script>
</body>
</html>

问题原因 #

x-for内部嵌套Alpine.data组件时，组件会创建独立的作用域，外部数组的更新无法穿透到这个独立作用域中触发重新渲染。Alpine.js的响应式系统在处理嵌套组件时，不会自动将外部遍历的item绑定到组件内部的响应式依赖中。

解决方案 #

有两种可行的解决方式：

方式一：将遍历项作为参数传入组件 #

修改组件定义，接收外部的item作为参数，并在组件内部转为响应式属性：

document.addEventListener('alpine:init', () => {
  Alpine.data('some_component', (item) => ({
    localItem: item
  }));
});

模板中传递item：

<template x-for="item in my_array">
  <div x-data="some_component(item)" >
    <div x-text="localItem.x"></div>
  </div>
</template>

方式二：通过$parent访问外部作用域 #

如果不需要在组件内部处理item，可以直接用$parent访问外部作用域的item，确保响应式更新被追踪：

<template x-for="item in my_array">
  <div x-data="some_component" >
    <div x-text="$parent.item.x"></div>
  </div>
</template>

验证说明 #

修改后点击按钮，嵌套组件内的遍历内容会和普通div同步更新，符合预期。

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