Javascript 是否有方法使用Alpine.js向循环对象添加属性或组件数据？

从本质上说，我从服务器接收JSON，并希望向我循环的对象或组件的

x-data

添加属性，这在alpine.js中可能吗

数据是将在一段时间间隔内请求的数据，看起来像：

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

我想做的是向循环的

team

对象添加一个新属性

favorite

，默认设置为

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，false:false}”

在

tr

和

template

标记上，并且不将

team

对象传递给

x-data

指令。似乎

x-for

和

x-data

指令之间存在冲突，因为这会引发错误：

Uncaught ReferenceError:team未定义

我还尝试将

x-init

与

x-data

指令一起使用，但没有效果

在这个阶段，我想知道我是否必须切换到另一个JS库才能让它工作（如果必要，欢迎推荐），或者我的方法是否根本错误

---

非常感谢任何帮助/提示。

原则上，您应该在进入

x-for

之前添加“收藏夹”字段

例如，如果您正在使用

fetch

加载

团队

，您可以执行以下操作：

---

我还注意到您的示例使用的是

v-model

和

v-text

，它们应该分别是

x-model

和

x-text

。

我认为可能是这样，问题是最喜欢的是用户特定的数据，我将使用本地存储跟踪这些数据，所以当我再次拉入数据时，我不想重置它。你是对的，在这个例子中，它应该是

x-

而不是

v-

，这是深夜编程的缺点。在这个例子中，你可以从本地存储中加载收藏夹，并将其设置为false（而不是将Favorite设置为false，你可以根据本地存储中的内容来决定）