有沒有辦法使用 Alpine.js 向循環對象添加屬性或組件數據？

Question

本質上，我從服務器接收 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 }"

在tr和template標簽上，以及不將team對象傳遞給x-data指令。 x-for和x-data指令之間似乎存在沖突，因為這會引發錯誤： Uncaught ReferenceError: team is not defined

我還嘗試將x-init與x-data指令一起使用，但無濟於事。

在這個階段，我想知道是否必須切換到另一個 JS 庫才能使其正常工作（如有必要，歡迎提出建議），或者我的方法是否從根本上是錯誤的。

任何幫助/指針將不勝感激。

Answer 1

原則上你應該做的是在它到達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-model和v-text ，它們應該分別是x-model和x-text 。