提问人：askwer 提问时间：11/16/2023 最后编辑：Elvis Adomnicaaskwer 更新时间：11/16/2023 访问量：32
在 Svelte 中单击该复选框所在的行时切换复选框
Toggle a checkbox when the row it is in is clicked in Svelte
问：
我在表格行中有这个复选框，并且该行有一个单击事件，我尝试做的是在单击整行时切换复选框，当我在切换函数中使用 console.log 时触发事件并且字段正在更新。但显示的值没有改变，并且复选框没有被切换：
let items = [
{ "id": 1,
"name": "Item1",
"selected": false
},
{ "id": 2,
"name": "Item2",
"selected": false
}]
const toggle = (item) => {
item.selected = !item.selected
}
...
{#each items as item, index(item['id'])}
<tr on:click={()=>toggle(item)}>
<td>
<input type=checkbox bind:checked={item['selected']}/>
</td>
</tr>
{/each}
答：
1赞
Elvis Adomnica
11/16/2023
#1
更新不起作用的原因是您正在更改绑定对象的属性，而不是对象引用本身。为了使其触发更新，您需要在切换函数中重新分配项目，如下所示：
<script>
let items = [
{ "id":1,
"name":"Item1",
"selected":false
},
{ "id":2,
"name":"Item2",
"selected":false
}
]
const toggle = (item, index) => {
item.selected = !item.selected
items[index] = item;
}
</script>
<table>
{#each items as item, index}
<tr on:click={()=>toggle(item, index)}>
<td style="background: red; width: 50px;">
<input type=checkbox bind:checked={item['selected']}/>
</td>
</tr>
{/each}
</table>
请注意，我添加了一些背景颜色和宽度以使其更明显。
评论