I am new to VueJS with limited knowledge of Javascript, trying to do something I thought would be incredibly simple and commonplace.
Here is a simplified version of the code that demonstrates the problem:
export default {
template: `
<br><br>
testData:
<br>
{{ testData }}
<br><br>
<button @click="getData()">Get Data</button>
`,
data() {
return {
testData: []
}
},
methods: {
getData() {
fetch('json.txt', {method: 'GET'})
.then(response => response.json())
.then((data) => {
this.testData = data;
});
this.doSomethingWithData()
},
doSomethingWithData() {
alert(this.testData[1]);
}
}
}
The json.txt file contains :
["one","two","three"]
The problem here is that when you click the button, calling the getData() method, it doesn’t do things in the order in the code, instead it gets the json data after doing everything else, causing this.testData[1] in the next method to return ‘undefined’ instead of ‘two’.
This must be something to do with Javascript await, promise asynchronious somethingorother, which I have yet to learn about, but how do you get the code to wait for the data from the text file before proceeding to the next bit of code. (I have spent hours on StackOverflow and elsewhere trying many variations of the code above without success.)
The equivalent in PHP is just this simple line of code:
$testData = json_decode(file_get_contents('json.txt'), true);
Many thanks in advance !