Vue.js 将数据从 websocket 显示到 table 并将数据发送到其他组件

Question

版本：Vue CLI 2.6.x

我正在尝试解决两个问题：

问题 1：我的 Vue 应用程序已通过 websocket 订阅了更新。我不断获取数据，需要用接收到的数据更新 table。但是，即使列表 (aqiDataList) 中有内容，table 仍然是空的。

问题二：我还需要将 aqiDataList 传递给 AQITableComponent（实际的 table 最初应该是）但是有同样的问题

App.vue

<template>
    <v-container>
        <AQITableComponent :aqiList="aqiDataList" />
        <v-simple-table>
            <template v-slot:default>
                <thead>
                    <tr>
                        <th class="text-left">
                            Name
                        </th>
                        <th class="text-left">
                            Age
                        </th>
                        <th>Location</th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                    v-for="item in aqiDataList"
                    :key="item.id"
                    >
                        <td>{{ item.name }}</td>
                        <td>{{ item.age }}</td>
                        <td>{{ item.location }}</td>
                    </tr>
                </tbody>
            </template>
        </v-simple-table>
    </v-container>
</template>

<script>
import AQITableComponent from './AQITableComponent';

export default {
    name: 'AQIComponent',
    components: {
        AQITableComponent
    },
    data: function () {
        return {
            connection: null,
            aqiDataList: []
        };
    },
    mounted() {
    
    },
    methods: {
        
    },
    created: function () {
        console.log("Starting connection to WebSocket Server");
        this.connection = new WebSocket("wss://my-websocket.com");

        this.connection.onmessage = function (event) {
            //console.log(event.data);
            let aqiDataString = event.data;
            this.aqiDataList = [];

            let parsedData = JSON.parse(aqiDataString);

            parsedData.forEach((aqiData) => {
                
                this.aqiDataList.push({
                    ... object
                });
            });

            console.log(this.aqiDataList);
        };

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

AQITableComponent.vue

<template>
    <v-container>
        <v-simple-table>
            <template v-slot:default>
                .. same table as shown above
            </template>
        </v-simple-table>
    </v-container>
</template>

<script>
export default {
    name: 'AQITableComponent',
    props: ['aqiList'],
    data: function () {

    },
}
</script>

Answer 1

(1) 尝试对 onmessage 事件使用箭头函数：

来自：this.connection.onmessage = function (event) {...}

至：this.connection.onmessage = (event) => {...}

或：this.connection.addEventListener("message", (event) => {...});

这样 this.aqiDataList 将在您的组件上可用。在事件回调中。

这也应该可以解决问题 (2)，因为您的数组一开始就没有更新。

Vue.js 将数据从 websocket 显示到 table 并将数据发送到其他组件

Vue.js Displaying data from websocket into a table and sending data to other component

websocket

vue.js