有没有办法用 Alpine.js 向循环对象添加属性或组件数据?

Is there a way to add properties or component data to looped objects with Alpine.js?

基本上我从服务器接收 JSON 并想将属性添加到我正在循环的对象或组件的 x-data,这可能与 alpine.js?

数据是按时间间隔请求的数据,类似于:

let teams = [
    { id: 1, name: 'Person 1'},
    { id: 2, name: 'Person 2'},
    ...
];

我想做的是向循环的 team 对象添加一个新的 属性 favourite,默认设置为 false 或将其添加为组件数据。我打算稍后使用此 属性 来过滤列表。目前我有:

<template x-for="team in teams" :key="team.id">
    <tr>
        <td x-text="team.name"></td>
        <td>
            <input type="checkbox" x-model="favourite">
        </td>
    </tr>
</template>

我已经尝试了一些方法来让它工作,比如使用:

x-data="{ team: team, favourite: false }"

trtemplate 标签上,并且没有将 team 对象传递给 x-data 指令。 x-forx-data 指令之间似乎存在冲突,因为这会引发错误:Uncaught ReferenceError: team is not defined

我也尝试过使用 x-initx-data 指令,但无济于事。

在这个阶段,我想知道我是否必须切换到另一个 JS 库才能使其正常工作(如有必要,欢迎提出建议),或者我的方法是否根本错误。

任何 help/pointers 将不胜感激。

原则上你应该做的是在它到达x-for之前添加“最喜欢的”字段。

例如,如果您使用 fetch 加载 teams,您可以这样做:

<div
  x-data="{ teams: [] }"
  x-init="setInterval(() => {
    fetch('/teams-url').then(res => res.json()).then(teamsData => {
      teams = teamsData.map(team => ({ favourite: false, ...team }));
    });
  }, 1000);"
>

我还注意到您的示例使用了 v-modelv-text,它们应该分别是 x-modelx-text