Estoy tratando de representar cada operación desde Binances Websocket Stream en mi componente VUE3. Puedo renderizar 1 línea y esa línea sigue actualizándose, sin embargo, esto no es lo que estoy tratando de lograr. Muchas gracias por todas las sugerencias/soluciones.

 <template> <div> <div v-for="data in tradeDataList" :key="data.id"> <div> {{ data }} </div> </div> </div> </template> <script> export default { name: 'App', data: () => { return { connection: null, tradeDataList: [], } }, created() { this.getTradeStream(); }, methods: { getTradeStream() { console.log("Starting connection to WebSocket Server"); this.connection = new WebSocket("wss://stream.binance.com:9443/ws/btcusdt@trade"); this.connection.addEventListener("message", (event) => { let tradeDataString = event.data; this.tradeDataList = []; let parsedData = JSON.parse(tradeDataString); this.tradeDataList = parsedData; console.log(this.tradeDataList); }); this.connection.onopen = function (event) { console.log(event); console.log("Successfully connected to the echo websocket server..."); }; } } } </script>

Probé v-for looping a través de this.tradeDataList: esperaba una lista con un intercambio por línea. Lo que vi fue 1 línea que se actualiza constantemente en lugar de crear una nueva línea.