Svelte 组件属性动态值

Question

在此处查看示例：https://svelte.dev/repl/7fd322d6b7d641359774de781f013f45?version=3.18.1

我正在尝试通过检查组件的 id 是否与所选的 id 匹配来使组件的属性值动态化：

App.svelte

<script>
    import BanjoPlayer from './BanjoPlayer.svelte'
    let banjoPlayers = [{id: 1, name:'Scruggs'},{id: 2, name:'Pickelny'}]
    let selectedBP = 0
</script>
<ul>
{#each banjoPlayers as bp (bp.id)}
    <BanjoPlayer on:click="{e => selectedBP = bp.id}" {...bp} selected="{selectedBP === bp.id}" />
{/each} 
</ul>

BanjorPlayer.svelte

export let name
export let id
export let selected
</script>

<li on:click class:selected >
    {name} ({id})
</li>

我在 REPL 中加入了另外两个尝试：一个我认为可能有效（但不可行）的替代方案和一个有效但肯定不理想的替代方案。

Answer 1

这是一个错误，据我所知，它应该可以工作。

这显然与{...bp} 的传播有关。

没有展开的等效代码按预期工作：

<script>
    import BanjoPlayer from './BanjoPlayer.svelte'
    let banjoPlayers = [{id: 1, name:'Scruggs'},{id: 2, name:'Pickelny'}]
    let selectedBP = 0

    function isSelected(id) {
        console.log(id);
        return selectedBP === id
    }
</script>

<h2>
    The selcted player id is: {selectedBP}
</h2>

<p>
<em>How I want it to work:</em>
</p>
<ul>
{#each banjoPlayers as bp (bp.id)}
    <BanjoPlayer on:click="{e => selectedBP = bp.id}" selected="{selectedBP === bp.id}" id={bp.id} name={bp.name} />
{/each} 
</ul>

REPL