How to update text inside modal with the help of alpine.js - laravel-9

Question

I have a order list of the data, and each list item has popup modal attached, when user click on any list item it should show x-data value in the popup
<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>
below is my popup modal component i try this but it doesn't work <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>
any help how to pass x-data value to modal h1.

Answer 1

To be able to pass data to your modal, you will need to keep the modal in scope with your x-data:
<div x-data="{ friends: {{ $value['friends'] }} }">
<x-modal>
<h1 x-text="friends"></h1>
</x-modal>
</div>
However, if that isn't possible (e.g. due to CSS styling or element positioning), you can add another $dispatch instead:
<li x-data="{ friends: {{ $value['friends'] }}, mediId: {{$value['medid']}} }"
x-on:click.prevent="$dispatch('set-friends', friends); $dispatch('open-modal', 'confirm-result')"
</li>
<x-modal maxWidth="lg" name="confirm-result" focusable x-data="{ friends: {{ $value['friends'] }} }" x-on:set-friends.window="friends = $event.detail">
<form method="post" action="" class="p-6">
<h1 x-text="friends"></h1>
</form>
</x-modal>