My application is designed to make multiple requests and display the resulting data. Everything is functioning properly overall, but I am encountering some errors that are proving difficult to identify.
The application consists of two main components:
--App :Parent
---Events :Children
In App.vue, the children component is invoked like this:
<Events :events="gameInfo" :results="results" @startNewGame="startNewGame" />
The props passed are "gameInfo" and "results", while the component listens for the "startNewGame" event.
When the application initially loads in App.vue, a function is called:
// Get Next Game
getNextGame() {
this.gameInfo = [];
RouletteApi.getNextGame().then(response => {
this.gameInfo.push({ response });
});
}
This children component receives and displays the data.
In the children component:
<script>
export default {
name: "Events",
props: ["events", "results"],
data() {
return {
GameStartTime: null,
GameId: null,
GameUUID: null
};
},
watch: {
events: function(newVal, oldVal) {
this.GameStartTime = newVal[0]["response"].fakeStartDelta--;
this.GameId = newVal[0]["response"].id;
this.GameUUID = newVal[0]["response"].uuid;
}
},
created() {
setInterval(() => {
if (this.GameStartTime > 0) {
this.GameStartTime = this.events[0]["response"].fakeStartDelta--;
} else {
this.$emit("startNewGame", this.GameUUID); -- call to parent function
}
}, 1000);
}
};
</script>
I am monitoring the data, setting a timer, and triggering the "startNewGame" function from the parent when necessary, which will initiate another API call and supply the children with new data.
Upon expiration of the timer, the "startNewGame" function from the parent is invoked:
startNewGame(uuid) {
this.startSpinning();
RouletteApi.startNewGame(uuid).then(response => {
if (response.result == null) {
setTimeout(function() {
startNewGame(uuid);
}, 1000);
} else {
this.results.push({ response });
this.gameInfo = []; -- reset previous data
this.getNextGame(); -- call first function mentioned above
}
});
This function checks if the response is null, then sets a timeout to keep calling itself until a non-null response is received. Once a non-null response arrives, it updates the results in the children, resets the gameInfo array, and calls the getNextGame() function again to fetch new data.
RouletteApi.js:
import axios from 'axios'
export default {
getLayout() {
return axios.get('/configuration')
.then(response => {
return response.data
})
},
getStats() {
return axios.get('/stats?limit=200')
.then(response => {
return response.data
})
},
getNextGame() {
return axios.get('/nextGame')
.then(response => {
return response.data
})
},
startNewGame(uuid) {
return axios.get('/game/' + uuid)
.then(response => {
return response.data
})
}
}
Errors:
Error in callback for watcher "events": "TypeError: Cannot read property 'response' of undefined"
TypeError: Cannot read property 'response' of undefined
at VueComponent.events (Events.vue?5cf3:30)
Uncaught ReferenceError: startNewGame is not defined
The first two errors occur in the children component within the "watch" section. The last error is triggered when trying to call a function within the setInterval in the parent component.