使用刀片组件和alpinejs时如何获取正确的数据？

如何解决使用刀片组件和alpinejs时如何获取正确的数据？

我在组件方面是新手，而在laravel中是高山手。我有来自控制器$positions的数据。

$positions = [
        ['id' => 1,'content' => 'king'],['id' => 2,'content' => 'lord']
    ];

当我将其传递给laravel刀片时。这是我的代码

<div class="row">
        <div class="col">
            @foreach($list as $key => $position)
                <x-list :position="$position"/>
            @endforeach
        </div>
    </div>

我将其组件名称命名为<x-list/>并带有适当的位置，这是我的x-list组件的代码

<div class="red w-60 mb-1">
    <div x-data="positionData()" class="relative">
        <button @click="submit()" class="p-2">Submit</button>
    </div>
</div>
<script>;
    var position = @json($position);
    function positionData() {
        return {    
            submit() {
                console.log(position);
            },};
    }
</script>

这只是非常简单的代码，但是当我单击“提交”按钮时，获得的数据是最后一个位置 从列表['id' => 2,'content' => 'lord']中，即使我单击位置1数据，获得的数据仍然是位置2数据。我不知道现在会发生什么。我尝试在Google中搜索它以进行修复，但是我找不到正确的答案。

解决方法

我认为在这种情况下，问题是positionData函数在x-list的每次迭代中都被覆盖（因为每个组件都在创建一个新的window.positionData函数）。 / p>

要解决此问题，您可以执行以下操作：

<div class="red w-60 mb-1">
    <div x-data="positionData(@json($position))" class="relative">
        <button @click="submit()" class="p-2">Submit</button>
    </div>
</div>
<script>;
    function positionData(position) {
        return {    
            submit() {
                console.log(position);
            },};
    }
</script>

具体来说，您可能应该将<script></script>从x-list组件中移出，这样就不会为每个组件都重新创建它（它只能添加到页面一次）。 / p>