I am currently developing a compact VueJS application that operates solely on the client-side. The application utilizes VueRouter to update the URL when users input data into the app. This allows users to refresh the page and reload their data by using the URL. The data is stored in query parameters, for example:
.../app.html#/?time=300&time=300&distance=300&distance=300&unit=m&unit=m
The data is appropriately parsed through the router. However, when I try to add the data to my empty performance array, I encounter a problem with the :class attribute in the markup causing:
TypeError: Cannot read property 'length' of undefined
The error points towards the performances array being undefined within the :class attribute located inside the v-for performance loop. By removing the :class from the app's markup, the site renders successfully. I suspect that the performances data array has not been properly passed to the :class.
In the VueRouter documentation, there was no mention of this specific routing issue. How can the data from the URL query parameters be effectively passed into the application? Below is a condensed version of my relevant code:
// js file
var router = new VueRouter({}); // left empty due to no routes, only query parameters are utilized
var app = new Vue({
el: '#app',
data: function() {
return {
performances: [],
units: units,
newPerformance: {
distance: {
value: '',
units: units.distance.options[0]
},
time: {
formatted: '',
value: ''
},
editingPerformance: null,
}
},
router: router,
watch: {
performances: {
handler: function() {
this.drawChart();
this.updateURL();
},
deep: true
}
},
updateURL: function() {
var times = this.performances.map(function(v) {
return v.time.value
}),
distances = this.performances.map(function(v) {
return v.distance.value
}),
units = this.performances.map(function(v) {
return v.distance.units.value
});
router.push({
query: {
time: times,
distance: distances,
dunit: units
}
});
}
....
});
HTML file
...
<div v-for="(performance, index) in performances" :class="{'card-list': performances.length > 1 }">
...
</div>
...
After going through the Reactivity in Depth docs, I attempted solutions such as:
Vue.nextTick(function() {
this.performances.push(performance);
})
and
Vue.set(app, 'performances',performanceArray);
both resulting in the same error message. Additional code snippets can be provided upon request.
Edit: Including stack traces:
[Vue warn]: Error when rendering root instance: warn @ vue.js:513
Vue._render @ vue.js:2934
(anonymous function) @ vue.js:2335
get @ vue.js:1643run @ vue.js:1712
flushSchedulerQueue @ vue.js:1530
(anonymous function) @ vue.js:465
nextTickHandler @ vue.js:414
this error followed immediately by:
vue.js:427 TypeError: Cannot read property 'length' of undefined(…)
logError @ vue.js:427