Estoy tratando de renderizar msg desde la matriz all_msgs.
<script> import { sender_msgs } from "../var_store"; import { receiver_msgs } from "../var_store"; const all_msgs = [1,2,3,4]; // $: msgs = all_msgs; sender_msgs.subscribe((e) => { all_msgs.push(`Sender: ${e.slice(-1)[0]}`); }); receiver_msgs.subscribe((e) => { all_msgs.push(`Receiver: ${e.slice(-1)[0]}`); console.log(all_msgs); }); </script> <div class="chat-window"> {#each all_msgs as msg} <div>{msg}</div> {/each} </div> <style> .chat-window { width: 500px; border: 1px solid #000; } </style>
Puedo ver que los números se pueden representar como texto html. Pero no se pudieron mostrar otros textos cuando all_msgs se actualizó mediante los dos métodos de suscripción. Puedo ver all_msgs en la consola con los textos, pero no se pueden ver en html. El o/p de la pantalla y console.log de all_msgs también se comparte.
Resuelto: la reactividad se basa en la asignación. El siguiente código funciona:
<script> import { sender_msgs } from "../var_store"; import { receiver_msgs } from "../var_store"; let all_msgs = []; // $: msgs = all_msgs; sender_msgs.subscribe((e) => { all_msgs.push(`Sender: ${e.slice(-1)[0]}`); all_msgs = all_msgs; }); receiver_msgs.subscribe((e) => { all_msgs.push(`Receiver: ${e.slice(-1)[0]}`); all_msgs = all_msgs; }); </script> <div class="chat-window"> {#each all_msgs as msg} <div>{msg}</div> {/each} </div> <style> .chat-window { width: 500px; border: 1px solid #000; } </style>