I'm currently working on developing a test-taking system using Vue and Laravel. When a user inputs the test code and email address, they are directed to the test page. To display all the test questions based on the entered code, I implemented a navigation guard as shown below:
beforeRouteEnter (to, from, next) {
axios.post('api/questions',{
code: to.params.testcode
})
.then(response => {
next(vm => {
vm.testData = response.data //load testData object here
})
})
}
In addition to displaying the questions, I wanted users to navigate through them using next or previous buttons. So, I created a computed property to handle testData.questions and show one question at a time:
paginatedData () {
const start = this.pageNumber * this.size,
end = start + this.size;
console.log(this.testData.questions.length)
// return this.testData.questions.slice(start, end)
}
When checking the length of array using console.log, I noticed an odd behaviour where it initially displayed an error value before showing the actual length. This delay prompted me to experiment with using setTimeout in order to observe the behavior:
paginatedData () {
const start = this.pageNumber * this.size,
end = start + this.size;
setTimeout(() => {
console.log(this.testData.questions.length)
}, 1000);
// return this.testData.questions.slice(start, end)
}
The updated version now only shows the correct length of the array without any errors being logged.
What could possibly be causing this issue?