Vue.js不能使用TextTrackCueList更新DOM

Question

我想迭代一个TextTrackCueList元素，它基本上是HTML5视频标题的数组（参考：https://developer.mozilla.org/en-US/docs/Web/API/TextTrack#Properties）。下面是简化代码：

new Vue ({
  el: "#app",
  data() {
    return {
      vid: null,
      track: null,
      cues: []
    }
  },
  mounted() {
    this.vid = this.$refs.vid;
    this.track = this.vid.addTextTrack("captions");
    this.track.mode = "showing";
    this.cues = this.track.cues;
    this.addCue(); //We add just one cue before the list is rendered
  },
  methods: {
    addCue() {
      let i = this.cues.length;
      //The cue just shows during one second
      let cue = new VTTCue(i, i+1, "Caption "+i);
      this.track.addCue(cue);
    }
  }
});

.cues-list {
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <video ref="vid" width="50%" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" controls></video>
  <div class="cues-list">
    <ul>
      <li v-for="cue in cues">
        {{ cue.text }}
      </li>
    </ul>
    <button @click="addCue">Add cue</button>
  </div>
</div>

正���我们所看到的，当我们添加新的提示时，cues列表没有更新。我怀疑的原因是我没有使用Vue.js覆盖的变异方法之一（https://v2.vuejs.org/v2/guide/list.html#Mutation-Methods），因此DOM不会自动更新。实际上，我正在使用TextTrack.addCue()来添加提示，而不是Array.push()，因为TextTrack.cues属性是只读的。是否有一种解决方法，例如手动更新虚拟DOM的方式？

感谢您的帮助。

- JacopoStanchi

Answer 1

我找到的唯一答案是强制Vue重新渲染：

addCue() {
  let i = this.cues.length;
  //The cue just shows during one second
  let cue = new VTTCue(i, i+1, "Caption "+i);
  this.track.addCue(cue);
  this.$forceUpdate();
}

- JacopoStanchi