javascript - Svelte #each not looping through data - Stack Overflow

admin管理员组

文章数量:1323707

i'm taking SveleteJS for a test drive and got stuck

Made a Dashboard ponent and inside that ponent, i placed a Whiteboard ponent:

<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>

When i click the button, the console.log triggers and i can see the lines increasing in size, but i don't see it being rendered on the page, just the empty red div wrapping it.

I've tried adding $: to various places, but i'm not yet sure where it should be used and where it shouldn't be used, not that it was making a difference.

How do i get that #each to render a list of divs (and also, what is the correct way to pass in data from the on:click, doing {addLine('blah')} executes that addLine on page load)?

i'm taking SveleteJS for a test drive and got stuck

Made a Dashboard ponent and inside that ponent, i placed a Whiteboard ponent:

<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>

When i click the button, the console.log triggers and i can see the lines increasing in size, but i don't see it being rendered on the page, just the empty red div wrapping it.

I've tried adding $: to various places, but i'm not yet sure where it should be used and where it shouldn't be used, not that it was making a difference.

How do i get that #each to render a list of divs (and also, what is the correct way to pass in data from the on:click, doing {addLine('blah')} executes that addLine on page load)?

• javascript
• svelte
• svelte-ponent
• svelte-3

Share Improve this question Follow asked Oct 6, 2019 at 20:41 Jan Vladimir MostertJan Vladimir Mostert 13k1515 gold badges9292 silver badges150150 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

So, this kind of goes against what one might expect, but Svelte does not detect [].push() as mutating the state of the array variable. This is why the console log shows the variable being updated, but Svelte's rendering does not respond.

After doing a little digging, I found several threads (1, 2) that point this out, and clarify that this is true for calling methods on any object.

EDIT: This is also now called out explicitly in the docs / tutorials - see "Updating Arrays and Objects"

One of the easiest solutions (per the linked threads and docs) is to simply re-assign the variable value to itself; Svelte will pick that up and re-render. So, in your scenario, all I had to do to get your code to work was replace this:

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

With:

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

本文标签： javascriptSvelte each not looping through dataStack Overflow