Атрибут компонента Svelte Dynami c значение - PullRequest
Новая
       3

Атрибут компонента Svelte Dynami c значение

0 голосов
/ 05 февраля 2020

См. Пример здесь: https://svelte.dev/repl/7fd322d6b7d641359774de781f013f45?version=3.18.1

Я пытаюсь сделать значение свойства компонента динамическим c, проверяя, соответствует ли идентификатор этого компонента выбранному идентификатору:

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: альтернатива, которая, как я думал, могла бы работать (но не работает), и альтернатива, которая работает, но, безусловно, не идеальна.

1 Ответ

2 голосов
/ 05 февраля 2020

Это ошибка, она должна работать, насколько я могу судить.

Это связано с распространением {...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

...