Append Each WebSocket Message to div

I'm trying to render each trade from Binances Websocket Stream in my VUE3 component. I can render 1 line and that line keeps updating, however this is not what i'm trying to achieve. Many thanks for all suggests / solutions.

<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 tried v-for looping through this.tradeDataList - I was expecting a list with one trade per line. What I saw was 1 line that constantly updates rather than making a new line.

CodePudding user response：

Rather than, clearing out this.tradeDataList = []; and replaing the item this.tradeDataList = parsedData; push the item to the array. Optionally remove old items with splice etc

new Vue({
  el: '#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;

        let parsedData = JSON.parse(tradeDataString);
        
        // push new item to array
        this.tradeDataList.push(parsedData);
        
        // keep only last 10
        this.tradeDataList = this.tradeDataList.slice(Math.max(this.tradeDataList.length - 10, 0))
      });

      this.connection.onopen = function(event) {
        //console.log(event);
        console.log("Successfully connected to the echo websocket server...");
      };

    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>

<div id="app">
  <div>
    <div v-for="data in tradeDataList" :key="data.id">
      <div>
        {{ data.t }} - {{ data.p }}
      </div>
    </div>
  </div>
</div>