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

【问题标题】：How to get proper data when using blade components and alpinejs?使用刀片组件和 alpinejs 时如何获取正确的数据？
【发布时间】：2020-12-02 06:38:21
【问题描述】：

我是组件新手，在 laravel 中是 alpine 新手。我有来自控制器 $positions 的数据。

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

当我将它传递给 laravel Blade 时。这是我的代码

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

我将组件命名为 <x-list/> 并带有一个 prop 位置，这是我的 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 数据。我不知道现在会发生什么。我尝试在谷歌中搜索它以修复它，但我找不到正确的答案。

【问题讨论】：

对不起。我改变了标签。

标签： laravel laravel-7 alpine.js

【解决方案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 组件，这样就不会为每个组件重新创建它（它应该只添加到页面中一次）。

【讨论】：