I have a page where I can access data by calling domain.com/subpage?soundfile=something
Using the fetch method, I extract the query parameter from the URL to retrieve the necessary information. The retrieval process is successful as indicated by the data being stored in this.recording. However, despite the console.log showing that everything is working correctly, neither my audio element nor the span component get updated. Why is this happening?
<template>
<div>
<audio controls>
<source :key="key" :src="recording" type="audio/mp3" />
</audio>
<span :key="key">{{ recording }}</span>
</div>
</template>
<script>
const axios = require("axios").default;
export default {
data() {
return {
key: 0,
recording: ""
};
},
async fetch(context) {
const ip = await axios.get(
"somebackend/?soundfile=" + context.query.soundfile
);
this.recording = ip.data[0].file.url;
console.log(this.recording); // gives me the correct url/mp3 file
this.key++; // should update the audio element and the span but doesn't
}
};
</script>