I want to iterate elements of a TextTrackCueList, which is basically an array of captions of a HTML5 video (for reference: https://developer.mozilla.org/en-US/docs/Web/API/TextTrack#Properties). Here is a simplified code:
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>As we can see, the list of cues is not updated when we add new cues. The reason I'm suspecting is that I'm not using one of the mutation methods overridden by Vue.js (https://v2.vuejs.org/v2/guide/list.html#Mutation-Methods), so the DOM is not updated automatically. Indeed, I'm using TextTrack.addCue() to add a cue, and not Array.push(), because the TextTrack.cues property is read-only. Is there a workaround, like for example a way to update manually the virtual DOM?
Thank you for your help.