Vuejs2 Vue：如何基于事件流渲染一组组件？ {{stream.name} {{stream}} Vue.组件（'流显示'{ 道具：['stream']， 模板：“#流组件” }); const vm=新的Vue({ el:“#应用程序”， 数据：{ 流：空 }, 已创建：函数（）{ const self=这个； const eventSource=new eventSource（'my-url'）； eventSource.addEventListener（'message'，函数（evt）{ const data=JSON.parse（evt.data）； //每个消息都有一个唯一的流id self.streams=self.streams |{}； self.streams[data.id]=数据； }); } });

以上内容与我的设置非常相似。不过我有两个问题。要么显示未更新，要么当一个流结束时，其他流停止更新。

在Vue Discord中询问后，我得到了以下答案：

{{stream.name}
{{stream}}
Vue.组件（'流显示'{
道具：['stream']，
模板：“#流组件”
});
const vm=新的Vue({
el:“#应用程序”，
数据（）{
返回{
流：{}
}
},
创建（）{
const eventSource=new eventSource（'my-url'）；
eventSource.addEventListener（'message'，evt=>{
const data=JSON.parse（evt.data）；
//每个消息都有一个唯一的流id
此.$set（self.streams、data.id、data）
});
}
});

问题是，

流

没有反应。使其成为对象并使用Vue setter为其启用反应性

<component :is="stream-display" :stream="stream" v-for="(stream, key) in streams" :key="key"></component>
<template id="stream-component">
    <div class="card">
        <div class="card-header">{{ stream.name }}</div>
        <div class="card-body"><pre>{{ stream }}</pre></div>
    </div>
</template>
<script>
    Vue.component('stream-display', {
        props: ['stream'],
        template: '#stream-component'
    });
    const vm = new Vue({
        el: '#app',
        data: {
            streams: null
        },
        created: function() {
            const self = this;
            const eventSource = new EventSource('my-url');
            eventSource.addEventListener('message', function (evt) {
                const data = JSON.parse(evt.data);

                // each message has a unique id for the stream it is for
                self.streams = self.streams || {};
                self.streams[data.id] = data;
            });
        }
    });

<component :is="stream-display" :stream="stream" v-for="(stream, key) in streams" :key="key"></component>
<template id="stream-component">
    <div class="card">
        <div class="card-header">{{ stream.name }}</div>
        <div class="card-body"><pre>{{ stream }}</pre></div>
    </div>
</template>
<script>
    Vue.component('stream-display', {
        props: ['stream'],
        template: '#stream-component'
    });
    const vm = new Vue({
        el: '#app',
        data () {
          return {
            streams: {}
          }
        },
        created() {
            const eventSource = new EventSource('my-url');
            eventSource.addEventListener('message',  evt => {
                const data = JSON.parse(evt.data);

                // each message has a unique id for the stream it is for
                this.$set(self.streams, data.id, data)
            });
        }
    });
</script>