I am currently working on a Vue app and have the following setup:
data: function() {
return {
modules: [],
...
Along with the following method:
methods: {
submitted: function(){
...
axios({method: 'get',
url: 'http://' + document.location.host + '/api/execute?commands=' + encodeURI(JSON.stringify(commands)),
responseType: "blob"}).then(response => {
if (response.headers['content-type'] === 'image/jpeg'){
this.modules[current]['results']['image']['visible'] = true
this.modules[current]['results']['text']['visible'] = false
const url = window.URL.createObjectURL(response.data)
this.modules[current]['results']['image']['value'] = url
}
else{
this.modules[current]['results']['image']['visible'] = false
this.modules[current]['results']['text']['visible'] = true
var reader = new FileReader();
reader.onload = function(e) {
// reader.result contains the contents of blob as a typed array
console.log(e)
this.modules[current]['results']['text']['value'] = reader.result
}
reader.readAsArrayBuffer(response.data);
}
...
This piece of code is responsible for fetching data from a server and displaying it as text or image based on the server's response.
*v-for module in modules earlier*
<div class="resultText" :visibility=module.results.text.visible>
{{ module.results.text.value }}
</div>
<div class="resultImage" :visibility=module.results.image.visible>
<img :src=module.results.image.value>
</div>
However, I encounter a JavaScript error when the server returns text: TypeError: this.modules is undefined
The error seems to be occurring in this part of the code:
this.modules[current]['results']['text']['value'] = reader.result
The method works correctly with images, but when dealing with text it throws the same error: TypeError: self.modules is undefined