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

Question

我是组件新手，laravel 是 alpine 新手。我有来自控制器 $positions.

的数据

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

当我把它传给laravelblade的时候。这是我的代码

<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 中搜索以修复它，但我找不到正确的答案。

Answer 1

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

要解决它你可以这样做：

<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 组件，这样它就不会为每个组件获得 re-created（它应该只添加到页面一次）。

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

How to get proper data when using blade components and alpinejs?

laravel

laravel-7

alpine.js