Currently, I am facing an issue while attempting to display each trade from Binances Websocket Stream in my VUE3 component. The challenge I'm encountering is that only one line gets rendered and it keeps updating continuously. This is not the desired outcome that I intend to achieve. I appreciate any suggestions or solutions provided.
<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>
I have already attempted using a v-for loop on this.tradeDataList with the expectation of getting a list where each trade appears on a separate line. However, instead of individual lines for each trade, I observed a single line that kept updating persistently without creating new lines.