如何借助Alpine.js更新弹窗Modal内的文本内容

我有一组绑定了Modal弹窗的有序列表项，点击任意列表项时，需要在弹窗中展示对应列表项的x-data值。现有列表项代码如下：

<li x-data="{ friends: {{ $value['friends'] }}, mediId: {{$value['medid']}}  }" x-on:click.prevent="$dispatch('open-modal', 'confirm-result')"></li>
<li x-data="{ friends: {{ $value['friends'] }}, mediId: {{$value['medid']}}  }" x-on:click.prevent="$dispatch('open-modal', 'confirm-result')"></li>

我尝试在弹窗组件的<h1>标签中使用<h1 x-text="friends"></h1>但无效，弹窗组件代码：

<x-modal  maxWidth="lg" name="confirm-result" focusable>
    <form method="post" action="" class="p-6">
        <h1 x-text="friends"></h1>
    </form>
</x-modal>

如何将列表项的x-data值传递给弹窗内的h1元素？

问题核心是：弹窗和列表项属于独立的Alpine.js作用域，弹窗无法直接访问列表项x-data里的变量。以下是两种可靠的解决方式：

方式1：通过自定义事件传递数据 #

修改列表项的点击事件，在触发弹窗时携带对应的数据：

<li x-data="{ friends: {{ $value['friends'] }}, mediId: {{$value['medid']}}  }" 
    x-on:click.prevent="$dispatch('open-modal', { 
        name: 'confirm-result', 
        friends: friends, 
        mediId: mediId 
    })">
</li>

然后在弹窗组件中，创建Alpine.js作用域并监听open-modal事件，接收并存储传递的数据：

<x-modal maxWidth="lg" name="confirm-result" focusable 
         x-data="{ currentFriends: '', currentMediId: '' }"
         x-on:open-modal.window="if ($event.detail.name === 'confirm-result') { 
             currentFriends = $event.detail.friends; 
             currentMediId = $event.detail.mediId 
         }">
    <form method="post" action="" class="p-6">
        <h1 x-text="currentFriends"></h1>
    </form>
</x-modal>

方式2：使用Alpine.js全局存储（$store） #

先在全局初始化Alpine的存储对象，用于共享数据：

document.addEventListener('alpine:init', () => {
    Alpine.store('modalData', {
        friends: '',
        mediId: ''
    });
});

修改列表项的点击事件，将数据存入全局存储后再打开弹窗：

<li x-data="{ friends: {{ $value['friends'] }}, mediId: {{$value['medid']}}  }" 
    x-on:click.prevent="
        $store.modalData.friends = friends; 
        $store.modalData.mediId = mediId; 
        $dispatch('open-modal', 'confirm-result')
    ">
</li>

最后在弹窗中直接访问全局存储的数据：

<x-modal maxWidth="lg" name="confirm-result" focusable>
    <form method="post" action="" class="p-6">
        <h1 x-text="$store.modalData.friends"></h1>
    </form>
</x-modal>

关键注意点 #

如果{{ $value['friends'] }}是字符串或复杂对象，务必用@json($value['friends'])来确保渲染出合法的JavaScript值，避免语法错误：

<li x-data="{ friends: @json($value['friends']), mediId: {{$value['medid']}}  }">...</li>

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