i have this svelte code:

    <!--connectprom is a Promise that resolves when connect is ran--->
    {#await connectprom}
    <!--User hasnt yet connected to the server-->
    <form on:submit|preventDefault={connect}>
        <label for="un">Username</label>
        <input type="text" id="un">
    </form>
    {:then}
    <!--After the form was submited (user is connected)-->    
    Wele, <p class="name text-blue-300">{username}</p>
    <!--When send is ran it sends the data from the form to the socket.io server-->
    <form class="shadow-lg rounded-lg" on:submit|preventDefault={send} align="center">
        <label for="msg">Message:</label>
        <input type="text" id="msg">
    </form>
    {#each messages as msg}
    <Message username=msg.username content=msg.content/>
    {/each}
    {/await}

Is It Possible for the #each statement to run reactively? If not is there a workaround to do so?

i have this svelte code:

    <!--connectprom is a Promise that resolves when connect is ran--->
    {#await connectprom}
    <!--User hasnt yet connected to the server-->
    <form on:submit|preventDefault={connect}>
        <label for="un">Username</label>
        <input type="text" id="un">
    </form>
    {:then}
    <!--After the form was submited (user is connected)-->    
    Wele, <p class="name text-blue-300">{username}</p>
    <!--When send is ran it sends the data from the form to the socket.io server-->
    <form class="shadow-lg rounded-lg" on:submit|preventDefault={send} align="center">
        <label for="msg">Message:</label>
        <input type="text" id="msg">
    </form>
    {#each messages as msg}
    <Message username=msg.username content=msg.content/>
    {/each}
    {/await}

Is It Possible for the #each statement to run reactively? If not is there a workaround to do so?

• javascript
• svelte

• 1 Hi. Don't forget to accept the answer if it solved your problem. – wp78de Commented Nov 24, 2021 at 17:36

1 Answer 1

Normally the {#each} statement is run reactively, and should update if the variable messages changes.

BUT, for Svelte to register an update in an array, you have to reassign the variable.

General example Code from the Svelte Docs:

numbers = [] //TODO: We want a function that adds an item to the end of the array, that is the array Length + 1, so after a few runs it should look like this: [1,2,3,4, ...]

//This doesn't work
function addNumber() {
    numbers.push(numbers.length + 1); //The variable is not reassigned
}

//This does work!
function addNumber() {
    numbers.push(numbers.length + 1);
    numbers = numbers; //This is the reassignment
}

// OR
function addNumber() {
    numbers = [...numbers, numbers.length + 1]; //And this is also the reassignment
}

And some Example Code for your problem:

messages = [] //TODO: Have a function that appends a message to the array and forces the {#each} "loop" to update

//This doesn't work
function addMessage(newMessage) {
    messages.push(newMessage); // It's just adding to the array but the array isn't "registered" as updated
}

//This does work!
function addMessage(newMessage) {
    messages.push(newMessage);
    messages = messages; //This is the reassignment and causes the update
}

// OR
function addMessage(newMessage) {
    messages = [...messages, newMessage]; //Another way to add to it and reassign it to also cause an update
}

So I think that you have to change the way you append messages to the messages array.

Reference and Examples: https://svelte.dev/tutorial/updating-arrays-and-objects