Tengo este código esbelto:
<!--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)--> Welcome, <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}¿Es posible que la instrucción #each se ejecute de forma reactiva? Si no, ¿hay alguna solución para hacerlo?
Normalmente, la {#each} se ejecuta de forma reactiva y debería actualizarse si cambia la variable de messages .
PERO, para que Svelte registre una actualización en una matriz, debe reasignar la variable.
Código de ejemplo general de 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 }Y un código de ejemplo para su problema:
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 } Entonces, creo que debe cambiar la forma en que agrega mensajes a la matriz de messages .
Referencia y ejemplos: https://svelte.dev/tutorial/updating-arrays-and-objects