我正在嘗試在我的 VUE3 組件中呈現來自 Binances Websocket Stream 的每筆交易。我可以渲染 1 行并且該行不斷更新，但這不是我想要實作的。非常感謝所有建議/解決方案。
<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>
我已經嘗試通過 this.tradeDataList v-for 回圈 - 我期待一個每行一個交易的串列。我看到的是 1 行不斷更新而不是制作新行。
uj5u.com熱心網友回復：
而不是清除this.tradeDataList = [];和替換專案將專案this.tradeDataList = parsedData; 推送到陣列。可選擇使用拼接等移除舊專案
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/446726.html
標籤：javascript Vue.js 网络套接字 Vue组件
上一篇：遍歷物件陣列中的嵌套物件陣列