javascript - 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 列表在我们添加新的 cues 时并没有更新。我怀疑的原因是我没有使用 Vue.js ( https://v2.vuejs.org/v2/guide/list.html#Mutation-Methods ) 覆盖的变异方法之一，因此 DOM 不会自动更新。事实上，我正在使用 TextTrack.addCue() 添加提示，而不是 Array.push()，因为 TextTrack.cues属性是只读的。是否有解决方法，例如手动更新虚拟 DOM 的方法？

感谢您的帮助。

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