vuejs2 - Vue：如何根据事件流渲染一组组件？

Question

<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;
            });
        }
    });

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

Answer 1

在 Vue Discord 中询问后，我得到了这个答案：

<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>

问题是那streams不是被动的。使它成为一个对象并使用 Vue setter 为它启用响应性。