Svelte #each не просматривает данные - PullRequest
Новая
       31

Svelte #each не просматривает данные

0 голосов
/ 06 октября 2019

Я беру SveleteJS для тест-драйва и застрял

Сделал компонент Dashboard, и внутри этого компонента я поместил компонент доски: 

<script>
    import Whiteboard from "./Whiteboard.svelte";
    export let name;
</script>

<div class="box part-of-dashboard">
    <Whiteboard lines={[]} />
</div>

Whitebord.svelte: 

<script>
    export let lines = [];

    export function addLine() {
        lines.push("blah");
        console.log(lines);
    }

</script>

<div style="background-color:red">
    {#each lines as line}
        <div>
            {line}
        </div>
    {/each}
</div>
<div>
    <button on:click={addLine}>
        Add Line
    </button>
</div>

Когда я нажимаю кнопку, срабатывает console.log, и я вижу, что линии увеличиваются в размере, но я не вижу, как они отображаются на странице, только пустая красная div-упаковкаэто.

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

Как получить этот #each для отображения списка элементов div (а также, как правильно передать данные из on:click, выполнение {addLine ('blah')} запускает тот addLine назагрузка страницы)?

1 Ответ

3 голосов
/ 07 октября 2019

Итак, этот вид идет вразрез с тем, что можно ожидать, но Svelte не обнаруживает [].push() как изменение состояния переменной массива. Вот почему журнал консоли показывает, что переменная обновляется, но визуализация Svelte не отвечает.

После небольшой копки я обнаружил несколько потоков ( 1 , 2 ), которые указывают на это и поясняют, что это верно для вызова методов любого объекта - хотя они, безусловно, могли бы выделить эту проблему подробнее в своих вступительных документах!

По-видимому, самое простое решение (согласно связанным потокам)это просто переназначить значение переменной для себя;Svelte подберет это и сделает заново. Итак, в вашем сценарии все, что мне нужно было сделать, чтобы заставить ваш код работать, это заменить это: 

export function addLine() {
    lines.push("blah");
    console.log(lines);
}

на: 

export function addLine() {
    lines.push("blah");
    lines = lines;
    console.log(lines);
}

Кажется немного глупым, но работает!

...