如何使用 Livewire Eloquent collection 在 Alpine.data 中生成 objects 的数组并在这些 js objects 中添加属性

Question

感谢您的关注和帮助，

我的 livewire 控制器中有一个 Collection。这个 collection 包含一个玩家列表，有一些属性：这里我们只关注 id 和 name。所以我们可以想象 collection 中有 3 个玩家：

Players[0] : 'id'=>1, 'name'=>'Yann';
Players[1] : 'id'=>2, 'name'=>'Robert';
Players[2] : 'id'=>3, 'name'=>'Jessica';

我需要在我的高山数据中获取这些玩家。我可以使用@js 方法轻松地在 Alpine 中获取这些玩家：

window.addEventListener('alpine:init', () => {
        Alpine.data('data', () => ({
            players: @js($players),
        }))
    })

所以，现在我 alpine.data :

players: [
               { id: 1, name: 'Yann' },
               { id: 2, name: 'Robert' },
               { id: 3, name: 'Jessica' },
    ]

现在我可以使用模板 x-for 轻松地显示 html 中的球员 :

<template x-for="player in players">
    <p x-text="player.name"></p>
</template>

但我想在每个播放器中添加一些额外的属性 object。这些属性将根据用户的操作在前面更新。我想要这样的东西：

players: [
              { id: 1, name: 'Yann', touched20: 0, touched15: 0 },
              { id: 2, name: 'Robert', touched20: 0, touched15: 0 },
              { id: 3, name: 'Jessica', touched20: 0, touched15: 0 },
   ]

数组中每个 object 的所有附加属性都相同，所以我想我可以使用 foreach 循环将它们放入 object 中。但我看不到也不明白如何在我的 alpine.data 脚本中包含一个循环来执行此操作。

有人能帮帮我吗？

Answer 1

我编辑了我的问题，因为我找到了解决方案：

我只是在我的高山数据之外创建了一个 loopPlayers 函数，并在高山数据中调用了这个函数：

function loopPlayers() {
            let players = [];
            const livewirePlayers = @js($players);
            livewirePlayers.forEach(element => {
                players.push(element);
            });

            players.forEach(function(element) {
                element.touched15 = 0;
                
            })
            return players;
        }

并且在 alpine.data 中：

players: loopPlayers(),

现在我从我的 livewire 控制器中收集了我的玩家并且我在 js 数据中为集合中的每个元素都有了新属性

这很简单，我想和往常一样:)

如何使用 Livewire Eloquent collection 在 Alpine.data 中生成 objects 的数组并在这些 js objects 中添加属性

How to generate an array of objects in Alpine.data with Livewire Eloquent collection and Adding properties in those js objects

arrays

object

laravel-livewire

alpine.js