As a newcomer to VueJS, I appreciate your patience as I navigate through this. Let me provide as much detail as possible.
I am currently working on a Vue app that needs to retrieve a response from a server, iterate through the data, and set a Vue data variable with the values.
The issue arises when I attempt to loop through the data using a for loop. While I can access and modify the Vue data within the loop, it does not reflect in the rendering. More details are provided below:
Here is a snippet of my Vue app:
var app = new Vue({
el: '#app',
data() {
return {
items: {}
}
},
mounted() {
//using Axios to post -> this all works
axios({
method: 'post',
url: 'fetchOrder.php'
//used both arrow and normal function still doesn't work
}).then((response) => {
response = Object.entries(response.data)
for (i = 0; i < response.length; i++) {
//values are all correct
this.items[response[i][0]] = response[i][1]
}
})
}
})
I have searched extensively for solutions and found that while I am able to assign values to this.items outside the for loop, any modifications made inside the loop do not render on the list (which is displayed using v-for="order in orders"). This has been functioning properly until now.
Oddly enough, when checking the Vue extension, the orders object contains the correct values, indicating that they are being set correctly. The issue seems to lie in VueJS not rendering the updated list. (Refer to my Vue plugin output image below)
Vue plugin data output - image
At this point, I suspect there may be a scope problem where I cannot reference 'this'. I have attempted using .bind(this) without success.
Thank you for taking the time to assist :)
NOTE: It's worth mentioning that I am including Vue via CDN rather than the actual package.
NOTE: The mentioned typo was present on stack overflow but did not resolve my issue.