0

本质上，我正在从服务器接收 JSON，并且想向我正在循环的对象或x-data组件的对象添加属性，这可以通过 alpine.js 实现吗？

数据将在一定时间间隔内被请求，类似于：

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

我想做的是favourite向循环team对象添加一个新属性，默认设置为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 }"

在trandtemplate标记上以及不将team对象传递给x-data指令。似乎x-forandx-data指令之间存在冲突，因为这会引发错误：Uncaught ReferenceError: team is not defined

我也尝试x-init与x-data指令一起使用无济于事。

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

任何帮助/指针将不胜感激。

4

1 回答 1

2

原则上，您应该做的是在“最喜欢”字段到达x-for.

例如，如果您正在teams使用加载，fetch您可以执行以下操作：

<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-modeland v-text，应该分别是x-modeland x-text。

于 2020-10-16T09:12:31.793 回答