[英]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 }"
在tr
和template
标签上,以及不将team
对象传递给x-data
指令。 x-for
和x-data
指令之间似乎存在冲突,因为这会引发错误: Uncaught ReferenceError: team is not defined
我还尝试将x-init
与x-data
指令一起使用,但无济于事。
在这个阶段,我想知道是否必须切换到另一个 JS 库才能使其正常工作(如有必要,欢迎提出建议),或者我的方法是否从根本上是错误的。
任何帮助/指针将不胜感激。
原则上你应该做的是在它到达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
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.