I am trying to understand how Peaks works in this Vue example. It seems that peaks
is not available on Vue's data
options. Or am I mistaken?
Here is what I did in order to make peaks
to data
:
I tried to move the cues-generating part of the onWaveformLoaded
to its own function showCues
and call that one from a button event listener:
export default {
data () {
return {
peaks: null
}
},
mounted() {
document.querySelector('[data-action="show-cues"]').addEventListener('click', () => {
this.showCues();
});
},
methods: {
onWaveformLoaded(error, peaks) {
[...]
this.peaks = peaks
},
showCues () {
this.cues.forEach(cue => this.peaks.points.add(cue))
this.peaks.on('points.dragmove', ({ id, time:newTime }) => {
const time = parseFloat(newTime.toFixed(4))
this.$store.commit('programme/cueUpdate', { id, time })
})
// Test: log out `this._waveform`
console.log("this._waveform =", this._waveform)
},
}
}
This makes it work for this scenario. But I wonder, if this is the way to go. I have no idea what this._waveform
is actually doing. Logging it out at the end of showCues
only results in undefined
.
I wanted to have the destroy
function available as a separate function (n case it is needed somewhere else) and did this:
beforeDestroy () {
this.destroyWaveform()
},
methods: {
destroyWaveform () {
this._waveform.destroy()
}
}
However, this_waveform
is not available, the console throws this error.
Uncaught TypeError: Cannot read property 'destroy' of undefined
Any thoughts on what I am doing wrong?